使用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>