Question

我一直在尝试使用bootstrap 3设置网格，其中所有列都具有相同的高度，即使内容大小不同 - 我使用flexbox完成了。但是现在我试图在网格中的每个项目的底部添加一个实线边框，我只是无法使它工作（我想在底部有一个边框，网格元素之间有一个阴沟）。

我可以轻松地在顶部轻松完成：https://codepen.io/Wafflenaut/pen/dvzWzb

<div class="container-fluid">
    <div class="row" style="display:flex; flex-flow: row wrap;">

        <div class="col-xs-12 col-sm-4" >
        <div style="border-top:5px solid; border-top-color:#df5400;">

但是当我在按钮上尝试时，我得到的结果如下：http://codepen.io/Wafflenaut/pen/perPWL

    <div class="container-fluid">
    <div class="row" style="display:flex; flex-flow: row wrap;">

        <div class="col-xs-12 col-sm-4" >
        <div style="border-bottom:5px solid; border-bottom-color:#df5400;">

如果我直接在列div上尝试，我会得到一个实心吧。所以 - 我基本上需要在列之间获得一个排水沟，或者让一个嵌套的div达到全高。我已经尝试了许多解决方案（各种填充技巧，等等），这些解决方案往往不起作用或打破响应性。

而且这个踢球者 - 这是在我无法访问css或js文件的CMS中 - 所以我所做的一切都必须在html体内的一部分内联。

对攻击渠道的任何建议？

Answer 1

您可以使用display: flex

将class="col-xs-12 col-sm-4"添加到div中

codepen

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row" style="display:flex; flex-flow: row wrap;">

    <div class="col-xs-12 col-sm-4" style="display:flex;">
      <div style="border-bottom:5px solid; border-bottom-color:#df5400;">
        <p>replace me</p>
        <h2>Item 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4" style="display:flex;">
      <div style="border-bottom:5px solid; border-bottom-color:#df5400;">
        <h2>Item 2</h2>
        <p>replace me</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet lectus est. Fusce lobortis, velit sed finibus volutpat, magna nibh porttitor justo, at ornare quam nunc eu nulla. Fusce lacinia.</p>
      </div>
    </div>


    <div class="col-xs-12 col-sm-4" style="display:flex;">
      <div style="border-bottom:5px solid; border-bottom-color:#df5400;">
        <p>replace me</p>
        <h2>Item 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4" style="display:flex;">
      <div style="border-bottom:5px solid; border-bottom-color:#df5400;">
        <h2>Item 4</h2>
        <p>replace me</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4" style="display:flex;">
      <div style="border-bottom:5px solid; border-bottom-color:#df5400;">
        <h2>Item 5</h2>
        <p>replace me</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4" style="display:flex;">
      <div style="border-bottom:5px solid; border-bottom-color:#df5400;">
        <p>replace me</p>
        <h2>Item 6</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet lectus est. Fusce lobortis, velit sed finibus volutpat, magna nibh porttitor justo, at ornare quam nunc eu nulla. Fusce lacinia.</p>
      </div>
    </div>


  </div>
</div>

＆＃13;

Answer 2

为每个内联样式应用100％的高度。

    <div class="container-fluid">
      <div class="row" style="display:flex; flex-flow: row wrap;">

        <div class="col-xs-12 col-sm-4" >
          <div style="border-bottom:5px solid; border-bottom-color:#df5400; height: 100%">

使用Gutter

2 个答案: