我正在尝试对模态标题的内容进行样式设置。它将包含一个中心图像,以及两个较小的列,其中包含1或2个按钮/图像。我希望所有内容在垂直和水平方向上对齐。中心图像的尺寸各不相同。似乎是flexbox的工作。在我的实际代码中,#headerLHS /#headerRHS /#myModalLabel的内容是动态设置的
<div class="modal-title row" id="headerBox" class="container-fluid">
<div id="headerLHS" class="col-xs-3"><img id="lhs"/></div>
<div id="myModalLabel" class="col-xs-6"></div>
<div id="headerRHS" class="col-xs-3"><button id="rhs">label</button></div>
</div>
到目前为止,我的CSS是:
#headerLHS,#headerRHS {
display: flex; webkit-display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
padding: 0px;
justify-content: space-around;
align-items: center;
}
但这是行不通的。我似乎需要在#lhs和#rhs上设置样式,但是我不知道应该是什么样式。我已经进行了各种各样的灵活框标记,但无济于事。有人可以帮忙吗?
谢谢。
您没有相等的高度列,您也应该将flexbox应用于父对象,并设置`flex-wrap:wrap;。
#headerBox
{
display:flex;
webkit-display: flex;
flex-wrap: wrap;
webkit-flex-wrap: wrap;
}
#headerLHS,#headerRHS {
display: flex;
webkit-display: flex;
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
padding: 0px;
justify-content: center;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-title row" id="headerBox" class="container-fluid" style="display:flex;flex-wrap: wrap;">
<div id="headerLHS" class="col-xs-3"><button id="rhs">label</button></div>
<div id="myModalLabel" class="col-xs-6"><img id="lhs" src="http://dummyimage.com/640x4:3" class="img-fluid"/></div>
<div id="headerRHS" class="col-xs-3"><button id="rhs">label</button></div>
</div>
`
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句