使用 Bootstrap 和 Angular。我在自定义指令中有一个 div。即使我设置子 div 宽度:100%;似乎子 div 的两侧都有排水沟。我尝试调整父元素和子 div 的边距和填充,包括负数,没有任何变化。
我想强制 div '.panel-content-wrapper' 填充 'preview-panel'(自定义指令元素)的整个宽度
html:
<preview-panel>
<div class="panel-content-wrapper">
<a href="{{panel.templateUrl}}">
<div class="preview-left">
<div class= "info-wrapper">
<img ng-src="{{panel.iconUrl}}">
<h3>{{panel.name}}</h3>
</div>
</div>
</a>
<div class="preview-right">
<div class="essential-action">
<button>{{panel.essentialAction}}</button>
</div>
<div class="preview-quicklook">
<h5>Quicklook<h5>
<p>{{panel.essentialInfo}}</p>
</div>
</div>
</div>
</preview-panel>
CSS:
preview-panel {
height: 240px;
width: 100%;
background-color: #383838;
border: 5px solid black;
border-radius: 10px;
padding: 0;
margin: 0;
}
.panel-content-wrapper {
height: 100%;
width: 100%;
border-radius: 10px;
border: 1px solid blue;
overflow: hidden;
padding: 0px;
margin: 0px;
}
.preview-left{
display: inline-block;
height: 230px;
width: 30%;
border-radius:10px;
background-color: #474747;
border: 1px solid #2489cc;
padding: 0;
}
.info-wrapper {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
margin: auto;
}
.info-wrapper img {
display: block;
margin: auto;
}
.preview-right {
display: inline-block;
float: right;
height: 100%;
width: 70%;
/*border: 2px solid blue;*/
padding: 0;
display: table;
}
.essential-action {
display: table-row;
height: 33.333%;
}
.essential-action button {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.preview-quicklook {
height: 100px;
width: 100%;
background-color: #474747;
padding: 0;
display: table-row;
height: 66.666%;
}
最佳答案
我能够强制 div 展开并使用其父容器填充
.panel-content-wrapper {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: block;
关于css - Bootstrap 会在自定义指令元素内创建间距吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41886493/