Html Bootstrap 3.0：全宽彩色背景，中间紧凑的列

我想制作一个条纹业务主题，类似于W3Schools创建的主题。主题可以找到。它的特点是水平部分，由不同的背景色分隔

我遇到的一个问题是，服务、投资组合和定价中的列几乎占据了整个页面的宽度，我认为这看起来不太好，特别是对于三个定价框，我觉得它们应该更窄，并且仍然居中。为了回答这些问题，让我们以这些定价框为例

因此，我着手将这三个定价框压缩成一个更窄的形状，以页面为中心，同时保持全宽交替背景色。我想出了三种方法：

1） 将容器放在液体容器内： -

喋喋不休
...

---

3） 3个col-sm-2，两侧各有空列 保持容器流体布局，但不是三个

col-sm-4

，而是一个空的

col-sm-3

，三个

col-sm-2

，最后是一个空的

col-sm-3

（总共12列）

---

4） 3个立柱-sm-2，偏移-3至中心 我没有三个col-sm-4，而是有一个

col-sm-2 col-sm-offset-3

，然后是两个

col-sm-2

（这不会增加到12，但我用偏移量居中）**

---

（3）和（4）的问题是，一旦缩小浏览器窗口，框在换行到下一行之前变得太小（即文本从框中流出）。在（4）中，似乎如果我使用

容器

（与

容器流体

）相反），框在全屏显示时会变得太窄

正确的做法是什么？我认为这是一个几乎所有制作商业网站的人都会遇到的问题，但我在网上花了几个小时才找到答案

提前感谢,

Magnus

在引导中

Col lg是大屏幕， 列sm是小屏幕， Col md是中等设备， 列xs是小屏幕

根据浏览器，我们可以使用所有类。根据我的经验，我们可以使用col-lg-offset-3来显示大屏幕，剩下的屏幕我们应该不使用偏移，就像我们一样

UL列表格式：

<style>
   ul{
     margin:0;padding:0;
     text-align:center;
    }
   ul li
  {
     display:inline-block;
     text-align:center;
     width:300px;
   }
</style>
    <ul>
       <li>box1</li>
       <li>box2</li>
       <li>box3</li>
    </ul>

<div class="container">
   <div class="row text-center"> 
    <div class="col-lg-offset-3 col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
    <div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
    <div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
  </div>
</div>

保险商实验室{
边距：0；填充：0；
文本对齐：居中；
}
ulli
{
显示：内联块；
文本对齐：居中；
宽度：300px；
}

框1
框2
框3

无论哪个屏幕，所有列表都将位于屏幕的中心位置

其他格式：

<style>
   ul{
     margin:0;padding:0;
     text-align:center;
    }
   ul li
  {
     display:inline-block;
     text-align:center;
     width:300px;
   }
</style>
    <ul>
       <li>box1</li>
       <li>box2</li>
       <li>box3</li>
    </ul>

<div class="container">
   <div class="row text-center"> 
    <div class="col-lg-offset-3 col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
    <div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
    <div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
  </div>
</div>

contenbox。。
contenbox。。
contenbox。。

我们应该根据我们的业务需求使用所有级别。如果我们可以更改不同级别的col sm offset、col md offset.，

<div class="col-sm-4 col-xs-12">

这条线很重要。col-sm-4表示，在小屏幕及以上屏幕上，占据12个引导列中的4个。因此，尝试将其减少到12个引导列中的3个，即col-sm-3。下面是示例源代码：

 <div class="col-sm-3 col-xs-12">
  <div class="panel panel-default text-center">
    <div class="panel-heading">
      <h1>Basic</h1>
    </div>
    <div class="panel-body">
      <p><strong>20</strong> Lorem</p>
      <p><strong>15</strong> Ipsum</p>
      <p><strong>5</strong> Dolor</p>
      <p><strong>2</strong> Sit</p>
      <p><strong>Endless</strong> Amet</p>
    </div>
    <div class="panel-footer plan">
      <h3>$19</h3>
      <h4>per month</h4>
      <button class="btn btn-lg">Sign Up</button>
    </div>
  </div>

基本的
20Lorem

15Ipsum

5Dolor

2坐

无尽的Amet

$19
每月
注册

下面是我认为最好的解决方法。我将把它分为是否是一个背景图像或颜色，我们正在寻找适用于整个宽度

CSS（用于插图和固定宽度的格式） 这里的关键是

固定宽度

类，并遵循您的方法（2）。其他样式只是为了让您可以尝试并轻松了解其工作原理

CSS（背景图像） 这里的关键是

背景大小：contain

元素。只要背景图像的宽度/高度比大于截面的比例，图像就会填充整个背景

CSS（背景色）

背景色

无需任何调整即可工作

HTML

在这里
在这里
她

---

如图所示，通过在容器周围添加一个

，您可以将背景图像或颜色应用于页面的整个宽度。

完成以下操作：@SanjeevK谢谢，但不幸的是，这并不能解决我的问题。我更新了抵消法的问题。我仍然有与解决方案（3）相同的问题。谢谢，但是如果你这样做的话，列将不会悲伤地居中。

 <div class="col-sm-3 col-xs-12">
  <div class="panel panel-default text-center">
    <div class="panel-heading">
      <h1>Basic</h1>
    </div>
    <div class="panel-body">
      <p><strong>20</strong> Lorem</p>
      <p><strong>15</strong> Ipsum</p>
      <p><strong>5</strong> Dolor</p>
      <p><strong>2</strong> Sit</p>
      <p><strong>Endless</strong> Amet</p>
    </div>
    <div class="panel-footer plan">
      <h3>$19</h3>
      <h4>per month</h4>
      <button class="btn btn-lg">Sign Up</button>
    </div>
  </div>

.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;
}

#one {
    background-image: url([insert-url]);
    background-repeat: no-repeat;
    background-size: contain;
    height:500px;
}

#two {
    background-color: grey;
    height:500px;
}

<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>