Question

我正在尝试从我的平面设计师那里实现一个设计，虽然看起来很酷但令我头疼，因为我不知道如何在引导程序中实现。

我们有一个号召性用语部分，它与左右极端的12列网格系统对齐。

它也会延伸到视口边缘：

在左边，我们有红色背景一直延伸到视口边缘。
在右边，我们有一个灰色的背景图像，一直延伸到视口边缘。

我还没有能够找到我想要实现的搜索术语，更不用说从哪里开始了（除了让cta使用背景作为整个宽度，然后将左边的元素覆盖在顶部）。

有关如何在bootstrap中编码以下图形布局的任何想法？

<section class="cta" style="background: grey; position: relative">
    <div class="red" style="position: absolute; left: 0; width: 10%; background: red"></div>
    <div class="text-outer">
        <div class="container">
            <div class="row">
                <div class="col-xs-6">left</div>
                <div class="col-xs-6">right</div>               
            </div>
        </div>
    </div>      
</section>

Answer 1

使用<div class="container-fluid">作为起点;我在猜你的页面布局。我们试试这个：

见下文：

.cntn {
  border: 1px red solid;  /* you can remove this (not needed) */
}
.red {
  background-color: red;
  text-align: right;
  margin: 0;   /* optional */
  width: 100px; /* adjust to suit your needs */
  float: left;
}
.cta {
  margin: 0;  /* optional */
  float: right;
  border: 1px solid green;  /* you can remove this (not needed) */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- make container fluid -->
<div class="container-fluid">
  <div class="row">
    <!-- heading area: hexagon -->
    <div class="red">
      <img src="http://placehold.it/100/100" />
    </div>

    <!-- heading area: call-to-action -->
    <section class="cta">
      Action
    </section>
  </div>
  <div class="row cntn">
    <div class="col-xs-6">left</div>
    <div class="col-xs-6">right</div>
  </div>

</div>

Answer 2

这样的东西？黑色应该是灰色渐变，max-width:400px可以是任何东西。

.cta {
  overflow-x: hidden;
  position: relative
}

.text-outer .container {
  width: 100%;
  max-width: 400px;
  background: grey;
  z-index: 2;
  position: relative;
}

.text-outer:before,
.text-outer:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
}

.text-outer:before {
  background-color: red;
  left: 0;
}

.text-outer:after {
  background-color: black;
  right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="cta">
  <div class="text-outer">
    <div class="container">
      <div class="row">
        <div class="col-xs-6">left</div>
        <div class="col-xs-6">right</div>
      </div>
    </div>
  </div>
</section>

Answer 3

只需更改＆＃div; div class =＆＃34; container＆＃34;＆＃39; to＆＃39; div class =＆＃34; container-fluid＆＃34;＆＃39;

Answer 4

jsFiddleLink

我创建了3个div作为Left Center和Right但是如果你想使用Left和center，那么创建你自己的类。可能以下工作

.custom {
    width:calc(100% - (50% - 768px/2));
}

.custom {
    width:calc(100% - leftCellWidth);
}

您可以根据十六进制图像的高度设置左侧的高度。

Answer 5

使用jumbotron课程以外的container课程作为全角，如here所述。

HTML：

<div class="jumbotron">
   <div class="container">
     <div class="row">
        <div class="red col-xs-4">
        </div>
        <div class="grey col-xs-8">
        </div>
     </div
   </div>     
</div>

CSS：

.red {
  background: url('awesomeredimage.png');
  background-size: cover;
}
.grey {
  background: url('awesomegreyimage.png');
  background-size: cover;
}

Answer 6

所有div都应该包含在容器div中。正如其他一些人也提出的那样：容器 - 流体有帮助。在容器流体中，您可以为其余内容添加常规容器。我的代码解释了这一点。

您可以采用简单的路线，只需将您发布的整个cta图像用作col-xs-12中具有.img-responsive的可点击图像。在这种情况下，我的修复需要大约2分钟：

<section style="background: grey; position: relative">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <img src="/img/cta.jpg" class="img-responsive">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="container">
                    <!-- All you other content here-->
                </div>
            </div>
        </div>
    </div>
</section>

但是我也可以将设计破解为cols，因为我尝试在下面的代码片段中显示。当然，您需要自己调整并确定确切的尺寸。

<section style="background: grey; position: relative">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-3 red">
                <img src="/img/hexagon.png" class="img-responsive pull-right">
                <!--and give this img a negative margin to flow over to the grey area-->
            </div>
            <div class="col-xs-1 grey-image"></div>
            <div class="col-xs-3 grey-image">
                <h3 class="text-center">Call to action</h3>
                <p class="text-center">Discount etcetera</p>
            </div>
            <div class="col-xs-5 grey-image">
                <button class="btn center-block">Request quote</button>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="container">
                    <!-- All you other content here-->
                </div>
            </div>
        </div>
    </div>
</section>

Answer 7

使用class="container-fluid"代替class="container"而不是这种风格：

.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}

具有图形背景的Bootstrap全宽部分

7 个答案: