Question

这就是我想要实现的目标。顶部框，背景图像跨越整个浏览器宽度，内部有2个内容框。我做的没问题。

然后我需要再下2个盒子，再次居中，但每一半都需要一个不同的背景图像，它应该在中间相遇并且流到它们各自的边缘。我正在使用bootstrap因为我希望这些在较小的屏幕上堆叠。我无法弄清楚这是怎么可能的。黑色边框代表容器。我可以将顶部位包装在自己的容器中，这很好，但我无法弄清楚如何让底部工作，我真的不想使用绝对定位，因为它将是一个噩梦得到工作的响应元素。

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

HTML：

    ChromeOptions chromeOptions = new ChromeOptions();
    chromeOptions.setExperimentalOption("prefs", prefs);
    String CurrentDir = System.getProperty("user.dir");
    String pluginDir = CurrentDir + "\\src\\main\\resources\\extensions\\newPlugin\\Chrome\\";
    chromeOptions.addArguments("--load-extension=", pluginDir);
    WebDriver driver = new ChromeDriver(chromeOptions);

CSS：

<div class="fluid-full">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="example">
                <h1>Title</h1>
                <p>This is a paragraph</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="example">
                <h1>Title</h1>
                <p>This is a paragraph</p>
            </div>
        </div>
    </div>
</div>
</div>
<div class="container">  
    <div class="row">
        <div class="col-md-6 left-half">
            <div class="example">
                <h1>Title</h1>
                <p>This is a paragraph</p>
            </div>
        </div>
        <div class="col-md-6 right-half">
            <div class="example">
                <h1>Title</h1>
                <p>This is a paragraph</p>
            </div>
        </div>
    </div>
  </div>

结帐Bootply

我需要顶部和底部的框排成一行。

任何帮助表示感谢。

Answer 1

我带了Bootply示例并将底部位修改为：

<div class="col-md-6 fluid-half">
  <div class="example col-md-6 pull-right"> 
    <h1 class="text-center">LEFT</h1>
</div>
</div>
<div class="col-md-6 fluid-half">
  <div class="example col-md-6 pull-left">
    <h1 class="text-center">RIGHT</h1>
  </div>
</div>

这是Bootply modification

这是你想要实现的目标吗？

Answer 2

好的，我已经完成了。不得不使用一些媒体查询。

HTML：

<div class="fluid-full">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="example">
                <h1>Title</h1>
                <p>This is a paragraph</p>
            </div>
        </div>
        <div class="col-md-6">
          <div class="example">
                <h1>Title</h1>
                <p>This is a paragraph</p>
            </div>
        </div>
    </div>
</div>
</div>
<div class="container-fluid about-us">
    <div class="row">
        <div class="col-md-6">
            <div class="sec-title text-center work-with-us">
                <h2>Work With Us</h2>
            </div>
        </div>

        <div class="col-md-6">
            <div class="sec-title text-center what-we-do">
                <h2>What We Do</h2>
            </div>
        </div>

    </div>
</div>

<强> CSS

.example{
    height: 200px;
    border: 1px;
    background-color: rgba(0,0,0,0.8);
    padding: 30px;
    border: 1px solid white;
    color: white;

}
.fluid-full{
    padding: 40px 0;
    background-image: url(http://lorempixel.com/1920/400);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;

}
.about-us .col-md-6 {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://lorempixel.com/g/1000/400);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 70px 0;
}
.about-us .col-md-6 .sec-title {
  margin-bottom: 0;
  margin: 0 15px;
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid white;
}
.about-us .col-md-6 .sec-title h2 {
  color: #FFFFFF;
}
.about-us .col-md-6 .sec-title h2::after {
  width: 70px;
}
@media (min-width: 768px) {
  .about-us .col-md-6 .sec-title {
    width: 720px;
    margin: 20px auto;
  }
}
@media (min-width: 992px) {
  .about-us .col-md-6 .sec-title {
    width: 455px;
    margin: 0 15px;
  }
}
@media (min-width: 1200px) {
  .about-us .col-md-6 .sec-title {
    width: 555px;
  }
}
@media (min-width: 992px) {
  .about-us .col-md-6 .work-with-us {
    float: right;
  }
}

以下是bootply

希望这对其他人也有用。

Bootstrap 3将左右背景图像放到浏览器边缘

2 个答案: