Bootstrap 3.0：全宽色背景，中央紧凑列 [英] Bootstrap 3.0: Full-Width Color Background, Compact Columns in Center
问题描述
我期待制作一个条纹商业主题，类似于W3School创建的主题。主题可以在此处找到。它的特点是水平部分，由不同的背景颜色分隔。
我遇到的一个问题是服务，投资组合和定价中的栏目跨越了很多我认为这个页面的整个宽度看起来不太好，特别是对于三个定价框，我觉得它应该更窄，而且仍然居中。让我们以这些定价盒为例来说明问题。
因此，我着手将这三个定价盒压缩成更窄的形状，主要集中在该页面仍然保持全宽交替背景色。我想出了三种方法来实现它：
1）将一个容器放入Container-Fluid中：
< div id =pricingclass =container-fluid>
< div class =container>
< div class =row>
< div class =col-sm-4 col-xs-12>
BlaBlaBla
< / div>
...
< / div>
< / div>
< / div>
2）进行以下添加/更改css和html：
.fixed-width {
display：inline-block;
float：none;
width：300px;
}
.row-centered {
text-align：center;
-
< div id =pricingclass =container-fluid>
< div class =row row-centered>
< div class =col-sm-4 col-xs-12 fixed-width>
BlaBlaBla
< / div>
...
< / div>
< / div>
3）3x col-sm-2，带保留容器流体布局，但不是有三个 col-sm-4 ，我有一个空的 col-sm-3 ，三个 col-sm-2 ，最后是一个空的 col-sm-3 （共12列）。
4）3-col-sm-2，以偏移-3为中心
不是有三个col-sm-4，我有一个 这样做的正确方法是什么？我认为这是一个问题，几乎每个人都在使商业网站陷入瘫痪，但我无法在网上找到答案，并在网上查了几个小时。 在此先感谢， Magnus 以下是我认为最好的方法解决这个问题。我会将它划分为它是否是我们希望在整个宽度上应用的背景图像或颜色。 col-sm-2 col-sm-offset-3 ，然后两个 col-sm-2 （这不会加到12，但是我（3）和（4）的问题是，一旦我缩小了浏览器窗口中，这些框在转换到下一行之前变得太小（即文本从框中流出）。在（4）中，似乎如果我使用 container （而不是
CSS（用于说明目的和固定宽度的格式）
.content {
padding：20px;
border：1px solid＃269abc;
背景：＃d6ec94;
}
[class * =col-] {
padding-top：10px; / * 15px自动应用的边填充* /
padding-bottom：10px;
border：1px纯灰色;
背景：透明;
}
.fixed-width {
display：inline-block;
float：none;
width：300px;
$ / code> 这里的关键是固定宽度 code> class，并遵循你的方法（2）。其他样式只是让你可以尝试它，并很容易地看到它是如何工作的。
CSS（背景图片）
#one {
background-image：url（[insert-url]）;
背景重复：不重复;
background-size：包含;
height：500px;
}
这里的关键是 background-size：contains 元素。只要背景图片的宽高比大于部分的比例，图片就会填满整个背景。
CSS（背景颜色）
#two {
background-color：grey;
height：500px;
}
background-color
HTML
< section id = 一个 >
< div class =container>
< div class =row text-center>
< div class =col-sm-4 fixed-width>
< div class =content>这里< / div>
< / div>
< div class =col-sm-4 fixed-width>
< div class =content>这里< / div>
< / div>
< div class =col-sm-4 fixed-width>
< div class =content> HER< / div>
< / div>
< / div>
< / div>
< / section>
正如所见，通过添加< section> 在容器周围，可以将背景图像或颜色应用于页面的整个宽度。
I was looking to make a striped business theme, similar to the one created by W3Schools. The theme can be found here. It is characterized by horizontal sections, separated by different background colors.
The one issue I had with it was that the columns in Services, Portfolio and Pricing, spanned pretty much the full width of the page, which I did not think looked great, particularly for the three pricing boxes, which i feel should be much narrower and still centered. Let's take those pricing boxes as the example for the purpose of the questions.
So, I embarked upon the task of squeezing these three pricing boxes into a narrower shape, centered on the page, while still maintaining the full-width alternating background color. I came up with three ways to do it:
1) Place a Container inside a Container-Fluid:
<div id="pricing" class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
BlaBlaBla
</div>
...
</div>
</div>
</div>
2) Make the following additions/changes to the css and html:
.fixed-width {
display: inline-block;
float: none;
width: 300px;
}
.row-centered {
text-align: center;
}
-
<div id="pricing" class="container-fluid">
<div class="row row-centered">
<div class="col-sm-4 col-xs-12 fixed-width">
BlaBlaBla
</div>
...
</div>
</div>
3) 3x col-sm-2, with empty columns on each side
Keep the container-fluid layout, but instead of having three col-sm-4, I have an empty col-sm-3, three col-sm-2, and finally an empty col-sm-3 (for a total of 12 columns).
4) 3x col-sm-2, with offset-3 to center
Instead of having three col-sm-4, I have one col-sm-2 col-sm-offset-3, then two col-sm-2 (this does not add to 12, but i center with offset).**
The problem with both (3) and (4) is that once i shrink the browser window, the boxes become too small before they wrap to the next line (i.e. the text flows out of the box). In (4) it seems if i use container (as opposed to container-fluid), the boxes become too narrow in full-screen even.
What is the correct way of doing this? I assume this is an issue almost everyone making business websites stumbles across, yet I was not able to find the answer online having worked on it for hours.
Thanks in advance,
Magnus
Below follows what I think is the best way to solve this. I will divide it up in whether or not it is a background image or color we are looking to apply accross the full width.
CSS (formatting for illustration purposes and fixed width)
.content{
padding:20px;
border: 1px solid #269abc;
background:#d6ec94;
}
[class*="col-"] {
padding-top:10px; /* 15px side paddings automatically applied */
padding-bottom:10px;
border: 1px solid grey;
background: transparent;
}
.fixed-width {
display:inline-block;
float:none;
width: 300px;
}
The key here is the fixed-width class, and follows your approach (2). The other styles are just so you can try it and easily see how it works.
CSS (background image)
#one {
background-image: url([insert-url]);
background-repeat: no-repeat;
background-size: contain;
height:500px;
}
The key here is the background-size: contain element. As long as the width/height ratio of your background image is larger than the section's ratio, the image will fill the full background.
CSS (background color)
#two {
background-color: grey;
height:500px;
}
background-color works without any tweaks.
HTML
<section id="one">
<div class="container">
<div class="row text-center">
<div class="col-sm-4 fixed-width">
<div class="content">HERE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">HERE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">HER</div>
</div>
</div>
</div>
</section>
As seen, by adding a <section> around the container, you can apply the background image or color to the full width of the page.
这篇关于Bootstrap 3.0：全宽色背景，中央紧凑列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
