twitter-bootstrap 在 div 上设置背景颜色（引导程序）

Question

提问by camelCaseVlad

I am pretty new to the coding, but even I know how to set up a background color in the div, but for some reason, I cant do it with the following piece of code:

我非常新的编码，但即使我知道如何设置的背景颜色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 360o Sport center with Skate, Long Skate, Scuba, Yoga Surf, Pilates and Surf workout.</p>
    </div>
</div>

So in css, if I set up the bellow code, it only affects h1and h4for some reason

所以在 css 中，如果我设置了波纹管代码，它只会影响h1并且h4出于某种原因

div.text-center {
  background-color: 
}

Although if I remove the class of .text-center from the parent div, it affects all child div's

虽然如果我从 parent 中删除 .text-center 的类div，它会影响所有 childdiv的

Hope somebody can explain me why. I guess it is something to do with bootstrap - this is first time I try to code using it.

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

Answer 1

采纳答案by Gleb Kemarsky

1) The parent block has lost its floating children

1) 父块失去了它的浮动子块

On the wide screen Bootstrap's columns become floating. Because of this the parent block decides that it has two headers only. And its height becomes less.

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

This problem has two solutions:

这个问题有两种解决方法：

1.1) Overflow

1.1) 溢出

You can set the overflowproperty on the .text-centerclass to hidden. This property causes the parent block to take the dimensions considering its floating children.

您可以将类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

1.2) 清除修复

Bootstrap rows use this method. You can see it in the bootstrap.css:

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

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

So you have to wrap your columns into the block with the .rowclass:

因此，您必须使用.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) Container > Row > Column

2）容器>行>列

Bootstrap's grid systeminvolves a hierarchy of blocks. The container contains rows and rows contain columns:

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

Rows must be placed within a .container(fixed-width) or .container-fluid(full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.

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

Moreover, the .rowclass has negative margins. If you do not put it into the container, then the horizontal scroll bar will appear on your page.

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

3) Don't change the `.text-center`class

3）不要改变`.text-center`班级

It's one of Bootstrap's alignment classes.

它是 Bootstrap 的对齐类之一。

You can define your own class for your purposes. Just as I have defined the .my-backgroundclass in the code below.

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

Please check the result. Is it what you want to achieve?

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

.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 360o Sport center with Skate, Long Skate, Scuba, Yoga Surf, Pilates and Surf workout.</p>
    </div>
  </div>
</div>

Answer 2

回答by Sachin G.

Try this one out

试试这个

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

Try another work around to find out conflict

尝试另一种解决方法以找出冲突

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

I have used HTML color codes called 'Hex Color', or you can simply use like white, black. Make sure if you adding color code then should use # before the code. You can try http://htmlcolorcodes.com/to find color codes

我使用了称为“十六进制颜色”的 HTML 颜色代码，或者您可以简单地使用白色、黑色。确保如果您添加颜色代码，则应在代码前使用 #。您可以尝试http://htmlcolorcodes.com/查找颜色代码

Answer 3

回答by Mitesh Mynee

The problem is with your code.

问题出在您的代码上。

You have not used <div class="row">while using Bootstrap Grids. That's why the background color only effects the H1and h4tags.

您<div class="row">在使用 Bootstrap Grids 时还没有使用过。这就是为什么背景颜色只影响H1和h4标签的原因。

Try the below code:

试试下面的代码：

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 360o Sport center with Skate, Long Skate, Scuba, Yoga Surf, Pilates and Surf workout.</p>
    </div>
    </div>
</div>

And the screenshot of the page after adding <div class="row">

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

Cheers! :)

干杯! :)

Answer 4

回答by Sergey Khmelevskoy

You need an .row class for your layout

您的布局需要一个 .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>

And add css of your choice to colored-bg class

并将您选择的 css 添加到 coloured-bg 类

.colored-bg{
  background-color: tomato;
}

twitter-bootstrap 在 div 上设置背景颜色（引导程序）

提问by camelCaseVlad

采纳答案by Gleb Kemarsky

1) The parent block has lost its floating children

1) 父块失去了它的浮动子块

1.1) Overflow

1.1) 溢出

1.2) Clearfix

1.2) 清除修复

2) Container > Row > Column

2）容器>行>列

3) Don't change the `.text-center`class

3）不要改变`.text-center`班级

回答by Sachin G.

回答by Mitesh Mynee

回答by Sergey Khmelevskoy

相关推荐

最近更新

标签

twitter-bootstrap 在 div 上设置背景颜色（引导程序）

提问by camelCaseVlad

采纳答案by Gleb Kemarsky

1) The parent block has lost its floating children

1) 父块失去了它的浮动子块

1.1) Overflow

1.1) 溢出

1.2) Clearfix

1.2) 清除修复

2) Container > Row > Column

2）容器>行>列

3) Don't change the .text-centerclass

3）不要改变.text-center班级

回答by Sachin G.

回答by Mitesh Mynee

回答by Sergey Khmelevskoy

相关推荐

twitter-bootstrap Bootstrap 开关按钮事件

twitter-bootstrap bootstrap 和 bootbox：设置对话框的屏幕中心

twitter-bootstrap 使普通 HTML 文本变灰的标准化方法

twitter-bootstrap 如何将 div 添加到 Bootstrap 下拉列表中

相关推荐

最近更新

标签

3) Don't change the `.text-center`class

3）不要改变`.text-center`班级