具有 Bootstrap flex 的等高列上的边框

Question

我正在使用带有机制的 Bootstrap 来提供equal column heights。

我试图为两列提供彩色的左右边框，但 Bootstrap 阻止了它。我最初在内部 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's answer 复制到simple HTML page，但看不到与 sn-p 视图显示的相同的内容。

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>