Bootstrap - 需要布局方面的帮助

Question

我是编码的新手，我认为最好的学习方法是获得一份工作，我做到了。我有一些基本的（比如非常基本的）HTML & CSS 知识，但是引导布局似乎适合我想要完成的事情。请记住，这是我在编码方面的第一个项目（！）。

这是我要复制的设计：
montere.it

我只对主页感兴趣，确切地说是主要图像下方的实际磁贴。我似乎找不到最好的解决方案来放置 2 个带有背景图像的图块，并排（无间隙），在图块中的背景图像上方有一些 h1 文本和一个小的 <p>，位于中央。在最初的两块下面还会有两块瓷砖。

我花了一个星期寻找类似的解决方案，但我对消化的所有信息感到精疲力尽和困惑。有人可以为我指出正确的方向来使用哪些功能吗？

似乎即使我定位了两个图像，也总是有间隙（右边或左边），没有办法将文本恰好放在图像上方的中央，所以当显示调整大小时它停留在一个地方并且我不想为剩下的事情哭泣。

我感觉这是一个愚蠢的问题，因为我找到的 none 信息提供了这个问题的确切解决方案，所以可能真的很容易做到，我就是可以'似乎没有把握。

很抱歉占用了你的时间，但我没有其他人要问了。

干杯！

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 的 link 下消失，所以我想在这里安全一点：

这是@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 - 需要布局方面的帮助

Bootstrap - Assistance with layout needed

html

css

twitter-bootstrap-4