如何在背景中使用两种分割颜色？

Question

这是我的目标。我使用Bootstrap作为起点，但我无法弄清如何让两个颜色的背景工作。我试图只使用两个div和Bootstrap网格，例如:

```html

```

请注意，"first"和"second"是您要使用的自定义类名。

<div class="row">

<div class="col-md-6" id="leftside">

</div>  

<div class="col-md-6" id="rightside">

</div>

然而，使用这种方式，我无法让 h1 标题居中！！有什么解决方法吗？抱歉，我是初学者。

- GeorgeDesigns

---

你能制作一个 JSFiddle 吗？http://jsfiddle.net/ - Idris

http://jsfiddle.net/2AjGW/1/ - GeorgeDesigns

你想让它在元素顶部居中显示吗？ - Idris

是的，但我认为Jayrow已经解决了这个问题 :) 只需要将宽度调整为100%即可。 - GeorgeDesigns

等等，什么意思？如果宽度是100％，那么col-md-6有什么意义？ - joshhunt

高度*，我的意思是高度。 - GeorgeDesigns

Answer 1

您可以使用渐变，并将其用作普通背景。

div{
width:100px;
height:100px;
background: linear-gradient(to right,   
    #9c9e9f 0%,
    #9c9e9f 50%,
    #33ccff 50%,
    #33ccff 100%);
}

JSFiddle: http://jsfiddle.net/FQ78n/

- JayRow

Answer 2

据我所知，你不能仅使用默认的Bootstrap类来完成这个任务。尝试使用以下方法：

<div class="row custom-row">

    <h1 class='custom-heading'>Heading</h1>

    <div class="col-md-6" id="leftside">

    </div>  

    <div class="col-md-6" id="rightside">

    </div>

</div>

使用CSS：

.custom-row {
    position: relative;
}

.custom-heading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
}

- joshhunt