Question

我需要一些帮助。我正在尝试创建一个页面标题与它有一些棘手。我需要一个容器流体，左半部分背景为蓝色，右半部分为白色。然后我需要一个h2＆＃34; Title＆＃34; / h2里面？容器以12列为中心，标题有一个边框底部，虽然延伸了浏览器的宽度。这是我的代码，但我知道这是一半已经做了一半，因为我无法弄清楚获得50％背景颜色的最佳方法。我需要这个工作在IE8上呈现和其他主要更新的浏览器。

我希望我能在这里为你们拍照。如果不是，我会为我的例子设置一个bootply。

enter image description here

提前感谢您的帮助。

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

使用Twitter Bootstrap将div的一半变成一种颜色

2 个答案: