html - 嵌套的 div 显示不正确

Question

我想创建一个列，其中嵌套了两列。我也想连续创建其中一些。

下图显示了我正在努力实现的目标:

我尝试在代码片段中编写以下代码，但它看起来不像我要重新创建的图像。

我不确定如何得到这个，因为我认为这将是一个简单的工作。

谢谢。

.matches {
  background: #999;
}
.club-back {
  height: 230px;
}
.team-data {
  background: #fff;
  color: #000;
  padding: 0 5px;
  margin-bottom: 15px;
  height: 100%;
}
.team-data p {
  font-size: 18px;
  color: #000;
  text-align: center;
  margin: 0;
}
.team-data p:first-child {
  padding-bottom: 15px;
}
.team-data p:last-child {
  margin: 0;
  font-size: 12px;
}
.team-data span {
  font-weight: normal;
  font-size: 14px;
}

<div class="container">

  <div class="col-md-12">
    <div id="slider-three">
      <div class="row">
        <div class="col-md-3 matches">
          <div class="row">
            <p class="text-center">title</p>
            <div class="col-md-4">
              <div class="club-back">
                <div class="col-md-12 team-data">
                  <p>
                    <img src="http://placehold.it/130x140" class="center-block" alt="image" />
                  </p>
                  <p>Title</p>
                  <p>sub-title</p>
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="club-back">
                <div class="col-md-12 team-data">
                  <p>
                    <img src="http://placehold.it/130x140" class="center-block" alt="image" />
                  </p>
                  <p>Title</p>
                  <p>Sub-title</p>
                </div>
              </div>
            </div>

Answer 1

我认为您没有将 bootstrap.css 库包含到您的代码中。在下面的代码片段中，我添加了 cdn。全屏查看结果。

.matches {
  background: #999;
}
.club-back {
  height: 230px;
}
.team-data {
  background: #fff;
  color: #000;
  padding: 0 5px;
  margin-bottom: 15px;
  height: 100%;
}
.team-data p {
  font-size: 18px;
  color: #000;
  text-align: center;
  margin: 0;
}
.team-data p:first-child {
  padding-bottom: 15px;
}
.team-data p:last-child {
  margin: 0;
  font-size: 12px;
}
.team-data span {
  font-weight: normal;
  font-size: 14px;
}
.margin-bottom{margin-bottom:20px;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">

  <div class="col-md-12">
    <div id="slider-three">
      <div class="row">
        <div class="col-md-4 matches">
          <div class="row">
            <p class="text-center">title</p>
            <div class="col-md-6 margin-bottom">
              <div class="club-back">
                <div class="col-md-12 team-data">
                  <p>
                    <img src="http://placehold.it/130x140" class="center-block" alt="image" />
                  </p>
                  <p>Title</p>
                  <p>sub-title</p>
                </div>
              </div>
            </div>

            <div class="col-md-6 margin-bottom">
              <div class="club-back">
                <div class="col-md-12 team-data">
                  <p>
                    <img src="http://placehold.it/130x140" class="center-block" alt="image" />
                  </p>
                  <p>Title</p>
                  <p>Sub-title</p>
                </div>
              </div>
            </div>