首页 文章

Bootstrap 3 - 2列，全宽背景，标准容器内的内容

提问于
浏览 次
0

我目前正在学习Bootstrap，但遇到了一个我无法理解的问题 .

我有两列，其中我需要背景为不同的颜色和全宽 . 但是，我需要将我的内容保留在普通容器中，因为我的布局的其余部分 .

当我使用'container-fluid'时，我的内容以及我的背景颜色是全宽的 - 这是我不想要的 . 如果我在“容器 - 液体”和“行”中嵌入一个“容器”，那么所有东西都被包含在标准容器（背景和所有）中 - 这也是我不想要的 .

所以我的问题是，如何使用全高度的背景颜色和在bootstrap 3中的普通容器内的内容对此网格布局进行编码？

谢谢

The design layout for Mark Up

我的可怜尝试......

<div class="container-fluid">
  <div class="row">
    <div class="col-md-7 col-md-push-5 bg-danger">ICON</div>
    <div class="col-md-5  col-md-pull-7 bg-success">WEB DEVELOPMENT</div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-7 bg-danger">ICON</div>
    <div class="col-md-5 bg-success">WEB DESIGN</div>
  </div>
</div>
twitter-bootstrap twitter-bootstrap-3

1 回答

  • 1

    我是这样做的：

    <div class="row">
<div class="container">
    <div class="col-xs-6">
        <h1>left</h1>
    </div>

    <div class="col-xs-6">
        <h1>right</h1>
    </div>
</div>
</div>

    CSS：

    .row {
background-color: #e1e2e4;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: 50% 100%;
}

    bootply：http://www.bootply.com/yDCLfN2DSb

    回复于

相关问题