Setting up a background color on div (bootstrap)

时间：2016-07-30 14:27:28

标签： html css twitter-bootstrap

enter image description here我对编码很新，但即使我知道如何在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: 
}

虽然如果我从父div中移除.text-center类，它会影响所有子div

希望有人可以解释我为什么。我想这与bootstrap有关 - 这是我第一次尝试使用它进行编码。

4 个答案:

答案 0 :(得分：1)

试试这个

div.text-center {
background-color: #000000;
}

尝试另一种解决冲突的方法

<div style="background-color: #000000; color: #ffffff;">

我使用了名为＆＃39; Hex Color＆＃39;的HTML颜色代码，或者你可以简单地使用白色，黑色。确保添加颜色代码然后在代码之前使用＃。您可以尝试http://htmlcolorcodes.com/查找颜色代码

答案 1 :(得分：1)

问题在于你的代码。

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

请尝试以下代码：

＆＃13;
＆＃13; 
div.text-center {
  background-color: green;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

添加<div class="row">

后的页面截图

enter image description here

干杯！ ：）

答案 2 :(得分：1)

1）父块丢失了浮动子

在宽屏幕上，Bootstrap的列变为浮动状态。因此，父块决定它只有两个头。它的高度变得越来越小。

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

1.1）溢出

您可以将overflow课程的.text-center媒体资源设为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）Clearfix

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）容器＆gt;行＆gt;柱

Bootstrap的grid system涉及块的层次结构。容器包含行和行包含列：

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

此外，.row类具有负边距。如果您没有将其放入容器中，则水平滚动条将显示在您的页面上。

3）不要更改.text-center类

这是Bootstrap的alignment classes之一。

您可以为自己的目的定义自己的课程。就像我在下面的代码中定义了.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>

答案 3 :(得分：0)

你的布局需要一个.row类

<div class="colored-bg row text-center">
  <div class="col-lg-12">
    <h1>...</h1>
    <h4>...</h4>
  </div>
  <div class="col-lg-4">
      ...
  </div>
</div>

并将您选择的CSS添加到colored-bg类

.colored-bg{
  background-color: tomato;
}
相关问题
最新问题