100％宽度部分内的最后一列背景颜色

Question

我正在构建网站，我想进入psd之类的部分（附有img）：

您会看到宽度为100％的部分以及该部分内部的TBitmap和TBitmapSurface。 但是，当.col-md-3结束时，其背景应继续并铺装主要部分的背景。

如何使专栏的背景继续？我已经花了数小时来解决这个问题，但没有找到正确的方法。谢谢！

bitmapSurf := TBitmapSurface.Create;
TBitmapCodecManager.LoadFromFile(path, bitmapSurf);

.col-md-9

Answer 1

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

Demo with bootstrap 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>

Answer 2

      "make  this changes in your code" hope this u want


   <div class="row col_bg">
           <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 class="clear">
</div>
    </div>

   "for css"


.row.col_bg {
  background-color: #4285db;
  clear: both;
}

.col-md-9 {
  float: left;
  width: 70%;
  }

 .single__meta h2 {
   color: #000;
   font-size: 38px;
   font-weight: 300;
   line-height: 42px;
    margin: 0;
 }


 .col-sidebar.col-md-3 {
   float: right;
    width: 30%;
   }

 .clear {
     clear: both;
       }