在与Bootstrap flex的相同高度专栏的边界

Question

我正在使用Bootstrap，其机制可以提供equal column heights。

我试图为两列提供彩色左右边框，但Bootstrap正在阻止它。我最初在内部DIV元素（而不是col-sm-3 / col-sm-9元素）上设置了边框，但是由于它是列{{1高度相等的元素，而不是其中的DIV元素。

HTML

DIV

CSS

<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>

JsFiddle示例：https://jsfiddle.net/robertmarkbram/co6hnoc3/

杰拉德的片段

将Gerard's answer中的代码复制到simple HTML page，但我看不到代码段视图显示的相同内容。

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

基于Gerard's comment to his answer，这是至少在简单模板中工作的解决方案。谢谢！

.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>