html - Bootstrap 具有相同高度和背景颜色的列

标签 html css twitter-bootstrap

<分区>

使用 Bootstrap 3。 我有两个具有相同高度的列(col-md-8 和 col-md-4)。 (多亏了这里找到的一个小片段 :) )

这没关系,它有效。 但我需要它们具有背景色。问题是 - 事实上这是正常的 - 两个 col 并排在一起,所以它们之间没有白色的排水沟。

我可以尝试在每个列中使用“内部”div。但是我需要这些内部 div 具有与父级相同的高度。

她的结果: You can see the gutters filled with the background color

@media only screen and (min-width : 768px) {
  .is-table-row {
    display: table;
  }
  .is-table-row [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
  }
}
.red {
  background: red;
}
.green {
  background: green;
}
  

<div class="container">
  <div class="row is-table-row">
   <div class="col-md-8 red"> text </div>
   <div class="col-md-4 green"> text text text text text text text text    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
  </div>
 </div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

你能帮帮我吗?

最佳答案

这就是我解决此类问题的主要方式:

<div class="row is-table-row">
   <div class="col-md-8 red"> 
       <div class="inner">
           text
        </div> 
    </div>
   <div class="col-md-4 green"> 
       <div class="inner">
           text
        </div> 
    </div>
</div>

CSS 是:

.red .inner{
   background: red;
}
.green .inner{
   background: #343335;
}
.red, .green{
    padding: 10px;
}

我不知道这是否是最好的解决方案,但它可以完成工作

关于html - Bootstrap 具有相同高度和背景颜色的列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38029959/

上一篇:jquery - Bootstrap 3 导航栏不扩展

下一篇:html - SB Admin 2 Navbar 在删除一些内容后不再折叠

相关文章:

css - Bootstrap CSS 和 JS 未在 heroku 上加载

html - Html制作的菜单栏,悬停和选择效果

html - 在 CSS 下拉列表 (megamenu) 中使用表单选择在 IE7 中失败——解决方法?

html - java applet 上面的 DIV

java - 子页面的不同 CSS 文件

css - 打印 CSS 打印时仍然显示一些背景图像

html - 我正在使用砖石,它没有给容器适当的高度,这就是为什么里面的瓷砖错位

css - 为什么 bootstrap 将 col-md div 更改为 100% 宽度 @max-width :991?

javascript - websocket javascript 读写

css - 在断点处将固定顶部导航栏变成静态顶部导航栏