在 div 上设置背景颜色（bootstrap）

Question

我对编码很陌生，但即使我知道如何在 div 中设置背景颜色，但出于某种原因，我无法使用以下代码来完成：

 <div class="text-center">
    <h1>Welcome to Ika Ika Surf Camp Tenerife.</h1>
    <h4>A NEW CONCEPT OF SURF CAMP AND SURF SCHOOL IN THE CENTER OF PLAYA DE LAS AMERICAS, TENERIFE</h4>
    <div class="col-lg-4">
        <h3>Surf School</h3> <img alt="surf-school" src="img/ika-ika-guias-surf.jpg">
        <p>Our surf lessons are taught by our fully qualified instructors with extensive surfing experience.</p>
    </div>
    <div class="col-lg-4">
        <h3>Surf Guides</h3> <img alt="surf-guides" src="img/ikaika-surf-school-tenerife.jpg">
        <p>The surf camp is located in the center of Playa de las Americas, 50m of the best waves of the island.</p>
    </div>
    <div class="col-lg-4">
        <h3>Surf School</h3> <img alt="activities" src="img/tenerife-actividades-skate.jpg">
        <p>Ika Ika Surf camp is a 360º Sport center with Skate, Long Skate, Scuba, Yoga Surf, Pilates and Surf workout.</p>
    </div>
</div>

所以在 css 中，如果我设置下面的代码，它只会影响 h1 和 h4 出于某种原因

div.text-center {
  background-color:
}

尽管如果我从父级中删除 .text-center 类 div ，它会影响所有子 div 的

希望有人能解释我为什么。我想这与引导程序有关——这是我第一次尝试使用它进行编码。

原文由 vlad 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

1）父块丢失了它的浮动子块

在宽屏上，Bootstrap 的列会浮动。因此，父块决定它只有两个标题。它的高度变小了。

这个问题有两个解决方案：

1.1）溢出

您可以将 .text-center 类的 overflow 属性设置为 hidden 。此属性使父块采用考虑其浮动子块的尺寸。

 .text-center {
  background: #f99;
  overflow: hidden;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="text-center">
  <h1>Welcome to Ika Ika Surf Camp Tenerife.</h1>
  <h4>A NEW CONCEPT OF SURF CAMP AND SURF SCHOOL IN THE CENTER OF PLAYA DE LAS AMERICAS, TENERIFE</h4>
  <div class="col-lg-4">
    <h3>Surf School</h3>
    <img alt="surf-school" src="img/ika-ika-guias-surf.jpg">
    <p>Our surf lessons are taught by our fully qualified instructors with extensive surfing experience.</p>
  </div>
  <div class="col-lg-4">
    <h3>Surf Guides</h3>
    <img alt="surf-guides" src="img/ikaika-surf-school-tenerife.jpg">
    <p>The surf camp is located in the center of Playa de las Americas, 50m of the best waves of the island.</p>
  </div>
  <div class="col-lg-4">
    <h3>Surf School</h3>
    <img alt="activities" src="img/tenerife-actividades-skate.jpg">
    <p>Ika Ika Surf camp is a 360ยบ Sport center with Skate, Long Skate, Scuba, Yoga Surf, Pilates and Surf workout.</p>
  </div>
</div>

1.2) 清除修复

Bootstrap 行使用此方法。您可以在 bootstrap.css 中看到它：

 .row:before,
.row:after {
  display: table;
  content: " ";
}
.row:after {
  clear: both;
}

因此，您必须使用 .row 类将列包装到块中：

 .text-center {
  background: #f99;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="text-center">
  <h1>Welcome to Ika Ika Surf Camp Tenerife.</h1>
  <h4>A NEW CONCEPT OF SURF CAMP AND SURF SCHOOL IN THE CENTER OF PLAYA DE LAS AMERICAS, TENERIFE</h4>
  <div class="row">
    <div class="col-lg-4">
      <h3>Surf School</h3>
      <img alt="surf-school" src="img/ika-ika-guias-surf.jpg">
      <p>Our surf lessons are taught by our fully qualified instructors with extensive surfing experience.</p>
    </div>
    <div class="col-lg-4">
      <h3>Surf Guides</h3>
      <img alt="surf-guides" src="img/ikaika-surf-school-tenerife.jpg">
      <p>The surf camp is located in the center of Playa de las Americas, 50m of the best waves of the island.</p>
    </div>
    <div class="col-lg-4">
      <h3>Surf School</h3>
      <img alt="activities" src="img/tenerife-actividades-skate.jpg">
      <p>Ika Ika Surf camp is a 360ยบ Sport center with Skate, Long Skate, Scuba, Yoga Surf, Pilates and Surf workout.</p>
    </div>
  </div>
</div>

2）容器>行>列

Bootstrap 的 网格系统 涉及块的层次结构。容器包含行，行包含列：

• 行必须放置在 .container （固定宽度）或 .container-fluid （全宽）中，以便正确对齐和填充。
• 使用行创建水平列组。
• 内容应该放在列中，并且只有列可以是行的直接子元素。

此外， .row 类的边距为负。如果你不把它放入容器中，那么水平滚动条就会出现在你的页面上。

3）不要改变 .text-center 类

它是 Bootstrap 的 对齐类 之一。

您可以根据自己的目的定义自己的类。就像我在下面的代码中定义了 .my-background 类一样。

请检查结果。这是你想要达到的目标吗？

 .my-background {
  background: #f99;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container my-background text-center">
  <h1>Welcome to Ika Ika Surf Camp Tenerife.</h1>
  <h4>A NEW CONCEPT OF SURF CAMP AND SURF SCHOOL IN THE CENTER OF PLAYA DE LAS AMERICAS, TENERIFE</h4>
  <div class="row">
    <div class="col-lg-4">
      <h3>Surf School</h3>
      <img alt="surf-school" src="img/ika-ika-guias-surf.jpg">
      <p>Our surf lessons are taught by our fully qualified instructors with extensive surfing experience.</p>
    </div>
    <div class="col-lg-4">
      <h3>Surf Guides</h3>
      <img alt="surf-guides" src="img/ikaika-surf-school-tenerife.jpg">
      <p>The surf camp is located in the center of Playa de las Americas, 50m of the best waves of the island.</p>
    </div>
    <div class="col-lg-4">
      <h3>Surf School</h3>
      <img alt="activities" src="img/tenerife-actividades-skate.jpg">
      <p>Ika Ika Surf camp is a 360º Sport center with Skate, Long Skate, Scuba, Yoga Surf, Pilates and Surf workout.</p>
    </div>
  </div>
</div>

原文由 Gleb Kemarsky 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

问题出在您的代码上。

在使用 Bootstrap 网格时，您没有使用 <div class="row"> 。这就是背景颜色仅影响 H1 和 h4 标签的原因。

试试下面的代码：

 div.text-center {
  background-color: green;
}

 <div class="text-center">
    <h1>Welcome to Ika Ika Surf Camp Tenerife.</h1>
    <h4>A NEW CONCEPT OF SURF CAMP AND SURF SCHOOL IN THE CENTER OF PLAYA DE LAS AMERICAS, TENERIFE</h4>
  <div class="row">
    <div class="col-lg-4">
        <h3>Surf School</h3> <img alt="surf-school" src="img/ika-ika-guias-surf.jpg">
        <p>Our surf lessons are taught by our fully qualified instructors with extensive surfing experience.</p>
    </div>
    <div class="col-lg-4">
        <h3>Surf Guides</h3> <img alt="surf-guides" src="img/ikaika-surf-school-tenerife.jpg">
        <p>The surf camp is located in the center of Playa de las Americas, 50m of the best waves of the island.</p>
    </div>
    <div class="col-lg-4">
        <h3>Surf School</h3> <img alt="activities" src="img/tenerife-actividades-skate.jpg">
        <p>Ika Ika Surf camp is a 360º Sport center with Skate, Long Skate, Scuba, Yoga Surf, Pilates and Surf workout.</p>
    </div>
    </div>
</div>

以及添加后的页面截图 <div class="row">

干杯! :)

原文由 Mitesh Mynee 发布，翻译遵循 CC BY-SA 3.0 许可协议