Question

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

我遇到的一个问题是，服务，产品组合和定价中的列几乎覆盖了页面的整个宽度，我认为这看起来不太好，特别是对于三个定价框，我觉得应该更窄，仍然居中。我们以这些定价框为例来说明问题。

因此，我开始将这三个定价盒压缩成一个较窄的形状，以页面为中心，同时仍然保持全宽交替的背景颜色。我想出了三种方法：

1）将容器放入容器 - 液体中：

<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）对css和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，每侧有空柱

保持容器流畅的布局，但我没有三个col-sm-4，而是一个空的col-sm-3，三个col-sm-2，最后一个空的col-sm-3（对于共12列）。

4）3x col-sm-2，偏移-3到中心

我没有三个col-sm-4，而是有一个col-sm-2 col-sm-offset-3，然后是两个col-sm-2（这不会增加到12，但我以偏移为中心）。**

（3）和（4）的问题在于，一旦缩小浏览器窗口，框在它们换行到下一行之前变得太小（即文本流出框外）。在（4）中，似乎我使用container（而不是container-fluid），即使全屏显示的框太窄了。

这样做的正确方法是什么？我认为这是一个问题，几乎每个人都在制作商业网站，但我无法在网上找到答案已有数小时。

提前致谢，

马格努斯

Answer 1

以下是我认为解决此问题的最佳方法。我会将它分为是否是我们希望在整个宽度上应用的背景图像或颜色。

CSS（格式用于说明目的和固定宽度）

$storageAccountKey = Get-AzureRmStorageAccountKey -ResourceGroupName $resourceGroupName -Name $storageAccountName | ? { $_.KeyName -eq 'Key1' } | % { $_.Value }

这里的关键是.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; }类，并遵循您的方法（2）。其他款式只是让你可以尝试并轻松看到它是如何工作的。

CSS（背景图片）

fixed-width

这里的关键是#one { background-image: url([insert-url]); background-repeat: no-repeat; background-size: contain; height:500px; }元素。只要背景图像的宽高比大于截面的比例，图像就会填满整个背景。

CSS（背景颜色）

background-size: contain

#two { background-color: grey; height:500px; }无需任何调整即可运作。

HTML

background-color

如图所示，通过在容器周围添加<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>，您可以将背景图像或颜色应用于页面的整个宽度。

Answer 2

IN Bootstrap，

Col-lg 是大屏幕， Col-sm 是小屏幕， Col-md 是中型设备， Col-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>

我们应该将所有类用于我们的业务需求。如果我们可以改变col-sm-offset-，col-md-offset的各种偏移类，

Answer 3

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

Bootstrap 3.0：全宽彩色背景，中心紧凑列