Question

问候我对boostrap有点新鲜，无论如何，我想创建的是，Boxes看起来像这样（右侧）：

Here

到目前为止我什么也没得到。我使用填充，但它弄乱了我的网格系统，我所做的是为图片边提供col-sm-8，为框提供col-sm-4但是它变得棘手，它总是弄乱我的网格系统。这是我的HTML。你可以帮我一点吗？

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <img src="xxxx" />
        </div>
        <div class="col-sm-4">
            <div class="col-sm-6">
                <div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
                    Oven
                </div>
            </div>
            <div class="col-sm-6">
                <div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
                    Cookers
                </div>
            </div>
            <div class="col-sm-6">
                <div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
                    Microwave Ovens
                </div>
            </div>
            <div class="col-sm-6">
                <div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
                    Steamers
                </div>
            </div>
            <div class="col-sm-6">
                <div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
                    Cooker hoods
                </div>
            </div>
            <div class="col-sm-6">
                <div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
                    Hobs
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您缺少row类，它对于嵌套行/列是强制性的，因此您可以执行此操作（转到整页以查看所需的结果）：

＆＃13;

.box {
  background-color: grey;
  padding: 25px;
  text-align: center;
  vertical-align: middle;
  margin: 10px;
}

img {
  max-width: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <img src="https://lorempixel.com/800/400/" />
    </div>
    <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-6">
          <div class="box">
            Oven
          </div>
        </div>
        <div class="col-sm-6">
          <div class="box">
            Cookers
          </div>
        </div>
        <div class="col-sm-6">
          <div class="box">
            Microwave
          </div>
        </div>
        <div class="col-sm-6">
          <div class="box">
            Steamers
          </div>
        </div>
        <div class="col-sm-6">
          <div class="box">
            Cooker hoods
          </div>
        </div>
        <div class="col-sm-6">
          <div class="box">
            Hobs
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

您可以阅读有关grid nesting

的更多信息

告知div看起来像盒子而不分发网格

1 个答案: