在引导程序 v4 中设置模态标题答案

【问题标题】：styling modal-title in bootstrap v4在引导程序 v4 中设置模态标题
【发布时间】：2016-07-16 19:46:35
【问题描述】：

我正在尝试设置模态标题内容的样式。它将包含一个中心图像和两个较小的列，其中包含 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 上进行样式设置，但我不知道它应该是什么。我玩过各种 flex-box 标记，但无济于事。有人可以帮忙吗？

谢谢。

【问题讨论】：

标签： flexbox bootstrap-4

【解决方案1】：

你没有等高列，你也应该在父级上应用 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>

【讨论】：