具有Bootstrap flex的等高列上的边框 [英] Border on equal height columns with Bootstrap flex

问题描述

我正在将Bootstrap与一种机制结合使用，以赋予相等的列高.

I am using Bootstrap with a mechanism to give equal column heights.

我正在尝试为两列都提供彩色的左右边框，但是Bootstrap禁止这样做.我最初在内部DIV元素(而不是col-sm-3/col-sm-9元素)上具有边框，但是这并不能以相同的高度起作用，因为它是列DIV元素的高度相等，而不是其中的DIV元素.

I am trying to give a coloured left and right border to both columns, but Bootstrap is preventing it. I originally had the border on on the inside DIV elements (instead of the col-sm-3/col-sm-9 ones), but this didn't work with equal height since it is the column DIV elements that are equal in height, not DIV elements inside them.

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/

JsFiddle example: https://jsfiddle.net/robertmarkbram/co6hnoc3/

将 Gerard的答案中的代码复制到

Copied code from Gerard's answer into a simple HTML page and am not seeing the same thing the snippet view shows.

推荐答案

基于 Gerard对他的回答的评论，是至少在简单模板中有效的解决方案.谢谢！

Based on Gerard's comment to his answer, this is the solution that works in a simple template at least. Thank you!

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

这篇关于具有Bootstrap flex的等高列上的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！