时间戳

首页 > 解决方案 > 100% 宽度部分内的最后一列背景颜色

html - 100% 宽度部分内的最后一列背景颜色

问题描述

我正在建立网站，我想访问我的 psd 上的部分（附上 img）： 在此处输入图像描述

你可以看到有 100% 宽度的部分.col-md-9和.col-md-3在这个部分里面。但是当 .col-md-3 结束时，它的背景应该继续并铺平主要部分的背景。

我怎样才能使专栏的背景继续？我花了几个小时解决这个问题，但我没有找到正确的方法。谢谢！

.single__content {
    width: 100%;
    max-width: 743px;
    padding-top: 57px;
}
.single__content p {
    color: #707070;
    font-size: 15px;
    font-weight: 400;
    line-height: 23px;
}
.single__meta {
    background: #3c73ba;
    height: 70px;
}
.single__meta h2 {
    font-size: 38px;
    font-weight: 300;
    line-height: 42px;
    color: #fff;
    margin: 0;
    padding-top: 14px;
}
.col-sidebar {
    background: #4285db;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<div class="single__meta">
    <div class="container">
        <div class="row ">
          <div class="col-md-9">
              <h2 class="page-title">Lorem ipsum dolor</h2>
          </div>
          <div class="col-sidebar col-md-3">
              Second column content
          </div>
        </div>
    </div>
</div>

标签： htmlcsstwitter-bootstrap

解决方案

您可以使用 分割顶部的背景background: linear-gradient。

带引导程序 4 的演示

.top-bar {
    background: linear-gradient(
    to right, 
    #3c73ba 0%, 
    #3c73ba 50%, 
    #4285db 50%, 
    #4285db 100%
  );
    width: 100%;
    padding: 0;
    margin: 0;
    color: #fff;
}
.col-left{
    background: #3c73ba;
}
.col-right {
    background: #4285db;
}
<div class="top-bar" style="padding: 0">
    <div class="container">
        <div class="row">
          <div class="col-left col-md-9">
              <h2>left</h2>
          </div>
          <div class="col-right col-md-3">
              <h2>right</h2>
          </div>
        </div>
    </div>
</div>

推荐阅读