Question

我对编码很陌生并且想出最好的学习方法就是获得演出，我做了。我有一些基本的（比如非常基本的）HTML＆amp; CSS知识，但bootstraps布局似乎适合我想要完成的事情。请记住，这是我编写时的第一个项目（！）。

所以这就是我试图复制的设计：
montere.it

我对主页感兴趣，确切地说是主图像下方的实际图块。我似乎无法找到最佳解决方案来定位2个具有背景图像的瓷砖，并排（无间隙），在瓷砖中的背景图像上方有一些h1文本和一个小<p>，位于中央。在最初的两个之下将会有两个以上的瓷砖。

我寻找类似的解决方案，但我对所有被消化的信息感到筋疲力尽。有人可以指出我正确的方向，使用哪些功能？

即使我定位两个图像，也总是存在间隙（右侧或左侧），因此无法将文本正好位于图像的中央位置，因此当显示位于显示位置时，它会保留在一个位置调整大小，我不想为其余的事哭泣。

我觉得这是一个愚蠢的问题，因为我发现的任何信息都没有提供这个问题的确切解决方案，所以可能必须非常容易做到而且我可以＆＃39似乎抓住了它。

我为占用你的时间而道歉，但我没有其他人要问。

干杯！

Answer 1

请检查一下：

<div class="row">
    <div class="col-sm-6 col-xs 12 col-img" style="background-color: red">
        <h1>Image 1</h1>
    </div>
    <div class="col-sm-6 col-xs 12 col-img" style="background-color: orange">
        <h1>Image 2</h1>
    </div>
    <div class="col-sm-6 col-xs 12 col-img" style="background-color: green">
        <h1>Image 3</h1>
    </div>
    <div class="col-sm-6 col-xs 12 col-img" style="background-color: yellow">
        <h1>Image 4</h1>
    </div>
</div>

并将其添加到您的CSS文件中：

.col-img h1 {
    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
}

Answer 2

如果其他任何人遇到此问题，这里是完全有效的解决方案。我只是不确定它是否会在gjfonte的链接下消失，所以我想在这里安全：

这是@gjfonte提供的内容：

<div class="row">
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-1">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-2">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-3">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-4">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
</div>


.content {
  padding-top: 90px;
  color: #fff
}

.content h1 {
  margin-bottom: 0;
  margin-top: 0;
  text-align: center;
}

.col-img .bg-img {
  text-align: center;
  margin: 0 -15px;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 250px;
}

.bg-img.img-1 {
  background-image: url("http://www.montere.it/assets/img/bg-qualitycycle-wrapper.jpg");
}

.bg-img.img-2 {
  background-image: url("http://www.montere.it/assets/img/bg-qualitymap-wrapper.jpg");
}

.bg-img.img-3 {
  background-image: url("http://www.montere.it/assets/img/bg-recipes-wrapper.jpg");
}

.bg-img.img-4 {
  background-image: url("http://www.montere.it/assets/img/bg-journal-wrapper.jpg");
}

Bootstrap - 需要协助布局

2 个答案: