使用Twitter Bootstrap制作一个div的一种颜色

Question

我需要一些帮助。我试图创建一个页面标题，有一些技巧。我需要一个容器液，左半边背景蓝色，右半边白色。然后我需要一个h2“标题”/ h2里面？容器将其居中放置在12列中，标题具有边框底部，其尽管延伸了浏览器的宽度。这是我的代码，但我知道这是一些做了一半，因为我无法找出获得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>

Answer 2

好了，所以我想这几个方面，并认为这可能是最好的解决方案。这是我想出来的。我希望它能解决类似的其他民族问题。

<style> 
.halfWrapper{ 
    /*background: linear-gradient(to right, @tmcDarkblue 0%, @tmcDarkblue 50%, #fff 50%, #fff 100%);*/ 
    background:@tmcDarkblue; 
    display:block; 
    padding: 120px 0 50px; 
    } 
.halfContained{ 
    background:#fff; 
    display:block; 
    padding: 174px 0 30px; 
    } 
.halfContained .col-xs-12{ 
    padding:0; 
    } 
.halfBorder{ 
    border-bottom:1px solid @tmcLightblue; 
    padding:0; 
    } 
.style-one { 
    border: 0px; 
    height: 1px; 
    background: #4EB2DF; 
    padding-top: 0px !important; 
    margin-top: 0px !important; 

} 
.halfWrapper h2{color:#fff; text-transform:capitalize; border-bottom:1px solid @tmcLightblue; display:inline-block; margin-bottom:0;} 
.halfContained h2{color:#fff; text-transform:capitalize; border-bottom:1px solid @tmcLightblue;} 

    </style> 


    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 halfWrapper"> 
      <div class="col-xs-11 col-xs-offset-1 col-sm-offset-5 halfBorder"> 
       <h2>CASE STUDIES</h2> 
      </div> 
     </div> 
     <div class="hidden-xs col-sm-6 halfContained"> 
      <div class="col-xs-12"> 
       <hr class="style-one"> 
      </div> 
     </div>   
    </div> 
</div>