引导码设计调制

Question

我在我的申请中使用了引导带。所以我的整个左边是#fff，而rest是#f9f9f9。

这就是我到目前为止所拥有的。

HTML:

<div class="container">
  <section class="content">
    <div class="col-xs-8">
      // Left side
    </div>

    <div class="col-xs-4">
     // Right side side-bar
   </div>

  </section>
</div>

CSS:

. container {
  width: 1200px !important;
}

PS:我不需要/不需要响应性设计.

下面的图片是我想要实现的一个例子。

​

这是一个链接有相同的设计。

Answer 1

请尝试以下代码：

<div class="container">
    <section class="content">
        <div class="col-xs-8 left-side">
        // Left side
    </div>
    <div class="col-xs-4 side-bar">
        // Right side side-bar
    </div>
    </section>
</div>

CSS

.container{
    margin: 0;
    padding: 0;
    width: 100%
}
.content{
    height: 100%;
    width: 100%;
}
.left-side{
    background-color: #fff;
    min-height: 100%;
}
.side-bar{
    background-color: #f9f9f9;
    min-height: 100%;
}
.no-margin{
    margin: 0;
    padding: 0
}

Answer 2

这将是实现你想做的事情的一种方式。

​

.leftside {
  background: #fff;
}

.rightside {
  background: #f9f9f9;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-8 leftside">
      // Left side
    </div>
    <div class="col-xs-4 rightside">
      // Right side side-bar
    </div>
  </div>
</div>

​