边境上引导柔性等高列(Border on equal height columns with Boo

我使用的引导与机制给予平等柱高度 。

我想给一个颜色的左侧和右侧边框两列，但引导阻止它。 我本来边框上在里面DIV元素（而不是col-sm-3 / col-sm-9的），但因为它是列这并不等于工作高度DIV是在高度相等的元素，不DIV在他们里面的元素。

HTML

<div class="container-fluid">
  <div class="row flex-row">
    <div class="col-sm-3" id="sidebar">
      <div>
        <p>menu item</p>
        <p>menu item</p>
        <p>menu item</p>
      </div>
    </div>
    <div class="col-sm-9" id="main">
      <div>
        <p>actual content</p>
        <p>actual content</p>
        <p>actual content</p>
        <p>actual content</p>
        <p>actual content</p>
        <p>actual content</p>
        <p>actual content</p>
      </div>
    </div>
  </div>
</div>

CSS

.container-fluid {
  padding-left: 0px;
  padding-right: 0px;
}

@media only screen and (min-width : 481px) {
  .flex-row.row {
    display: flex;
    flex-wrap: wrap;
  }
  .flex-row.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
  }
  .flex-row.row:after,
  .flex-row.row:before {
    display: flex;
  }
  .flex-row.row > [class*='col-'] > .box {
    display: flex;
    flex: 1;
  }
}

#sidebar {
  background: #B3D6B3;
  border: solid 10px #D6E9D6;
  margin: 0;
}

#main {
  background: pink;
  border: solid 10px #D6E9D6;
  border-left: 0px;
  margin: 0;
}

的jsfiddle例如： https://jsfiddle.net/robertmarkbram/co6hnoc3/

Gerard的片段

复制从代码杰拉德的回答到一个简单的HTML页面和我没有看到摘录视图显示了同样的事情。

Answer 1:

我简单的CSS。 我不知道我理解这个问题。 周围有框的边框。 你能否详细谈谈这个问题一点？

 .container-fluid { padding-left: 0px; padding-right: 0px; } /* Flexbox Equal Height Bootstrap Columns (fully responsive) */ @media only screen and (min-width : 481px) { .flex-row { display: flex; } } #sidebar { background: lightgreen; border: solid 10px red; margin: 0; } #main { background: pink; border: solid 10px red; border-left: 0px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row flex-row"> <div class="col-sm-3" id="sidebar"> <div> <p>menu item</p> <p>menu item</p> <p>menu item</p> </div> </div> <div class="col-sm-9" id="main"> <div> <p>actual content</p> <p>actual content</p> <p>actual content</p> <p>actual content</p> <p>actual content</p> <p>actual content</p> <p>actual content</p> </div> </div> </div> </div> 

Answer 2:

基于杰拉德对他的答案的评论 ，这是至少在一个简单的模板工程解决方案。 谢谢！

 .container-fluid { padding-left: 0px; padding-right: 0px; } #sidebar { background: lightgreen; border: solid 10px red; margin: 0; } #main { background: pink; border: solid 10px red; } /* ANYTHING SMALLER THAN Extra Small Devices, Phones */ @media only screen and (max-width: 480px) { #sidebar { margin-left: 15px; margin-right: 15px; } #main { margin-left: 15px; margin-right: 15px; border-top: 0px; } } /* ANYTHING LARGER THAN Extra Small Devices, Phones */ @media only screen and (min-width: 481px) { .flex-row { display: flex; } .flex-row>[class*='col-'] { display: flex; flex-direction: column; } .flex-row.row:after, .flex-row.row:before { display: flex; } #sidebar { margin-left: 15px; border-right: 0px; } #main { margin-right: 15px; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row flex-row"> <div class="col-sm-3" id="sidebar"> <div> <p>menu item</p> <p>menu item</p> <p>menu item</p> </div> </div> <div class="col-sm-9" id="main"> <div> <p>actual content</p> <p>actual content</p> <p>actual content</p> <p>actual content</p> <p>actual content</p> <p>actual content</p> <p>actual content</p> </div> </div> </div> </div> 

文章来源: Border on equal height columns with Bootstrap flex