html - 使用 Twitter Bootstrap 将一半的 div 设为一种颜色

Question

我需要一些帮助。我正在尝试创建一个带有一些技巧的页眉。我需要一个容器流体，左半部分背景为蓝色，右半部分为白色。然后我需要一个 h2 "Title"/h2 inside a ?容器使其在 12 列中居中标题有一个 border-bottom 可以拉伸(stretch)浏览器的宽度。这是我的代码，但我再次知道它已经完成了一半，因为我无法找出获得 50% 背景颜色的最佳方法。我需要它在 IE8 上工作以呈现和其他主要更新的浏览器。

我希望我能在这里为你们拍一张图片。如果没有，我会为我的示例设置一个 bootply。

提前感谢您的帮助。

<style>
.halfWrapper{
  background: linear-gradient(to right, blue 0%, blue 50%, #fff 50%, #fff 100%);
    display:block;
    padding:0;
    }
.halfAndhalf {
    width:50%;
    background:blue;
    display:inline-block;

}
.halfWrapper h2{color:#fff; text-transform:capitalize; border-bottom:1px solid green;}

</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 halfWrapper">
            <div class="container halfContain">
                <h2>Case Studies</h2>
            </div>
        </div>  
    </div>
</div>

Answer 1

你在正确的轨道上，只需将类更改为 body 元素即可。

对于 h2 元素的奇特底层，我结合了 border-bottom 属性和样式 hr(水平规则)元素。

h2 这里是一个 inline-block 元素，因此 border-bottom 元素只在 的长度内出现h2 文本。标题和水平线的边距已修改为零像素。

body {
  background: linear-gradient(to right, black 0%, black 50%, #fff 50%, #fff 100%);
  display: block;
  padding: 0;
}
/* couldn't find it in html
.halfAndhalf {
  width: 50%;
  background: blue;
  display: inline-block;
}
*/

.halfWrapper h2 {
  color: #fff;
  font-family: monospace;
  font-size: 26px;
  text-transform: uppercase;
  border-bottom: 2px solid #4EB2DF;
  display: inline-block;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
}
.style-one {
  border: 0px;
  height: 1px;
  background: #4EB2DF;
  padding-top: 0px !important;
  margin-top: 0px !important;
  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 halfWrapper">
      <div class="container halfContain">
        <h2>Case Studies</h2>
        <hr class="style-one">
      </div>
    </div>
  </div>
</div>