如何在Twitter Bootstrap中水平对齐3个框？

我需要在wordpress主题中彼此相邻插入3个框。我正在使用wp-bootstrap主题。

我创建了一个页面并将其命名为” offers”, 然后编写了以下代码

<div class="col-xs-4 text-center offer-box">
    <h1>Offer 1</h1>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
    </div>

    <div class="col-xs-4 text-center offer-box">
    <h1>Offer 2</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
    </div>

    <div class="col-xs-4 text-center offer-box">
    <h1>Offer 3</h1>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
    </div>

在css文件中, 我写道

.offer-box {
    background: #f4e759;
    height: 300px;
    border-radius: 10px;
}

.offer-box h1 {
    color: #080808;
}

.offer-box p {
    color: #080808;
    font-size: 1.2em;
}

它可以工作, 但是框显示为无边距。我需要为每个框添加左右边距。

它应该看起来像那个图像

#1

首先, 你应该将列包装成一行。 <div class =” row”> </ div>出于样式目的, 你应该在yor列中插入另一个<div>

列通过填充创建装订线(列内容之间的间隙)。该填充通过.rows上的负边距在第一列和最后一列的行中偏移。

尝试这个

<div class="row">
<div class="col-xs-4">
  <div class="text-center offer-box">
    <h1>Offer 1</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
                tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
                semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
                ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
                Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
                dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
<div class="col-xs-4">
 <div class="text-center offer-box">
    <h1>Offer 2</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
                tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
                semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
                ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
                Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
                dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
   </div>
  </div>  
  <div class="col-xs-4">
   <div class="text-center offer-box">
    <h1>Offer 3</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
                tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
                semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
                ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
                Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac
                dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  </div>
 </div>
</div>

还要检查此链接以获取更多示例Bootstrap网格系统

#2

你需要在style.less文件中设置适当的变量。我相信你需要看的是

@fluidGridColumnWidth

和

@fluidGridGutterWidth 

#3

你没有遵循Bootstrap网格语法。你的.col- *元素应位于.row内, 而该行又应位于.container中。应用正确的嵌套, 就可以了。

#4

请检查以下内容：

必须将行放置在.container(固定宽度)或.container-fluid(全角)内, 以便正确对齐和填充。

使用行创建水平的列组。

内容应放在列中, 并且只有列可以是行的直接子代。

列通过填充创建装订线(列内容之间的间隙)。该填充通过.rows上的负边距在第一列和最后一列的行中偏移。

读