Question

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

我做了什么我创建了一个页面并将其命名为“offer”，并且我编写了以下代码

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

它可以工作但是框没有边距。我需要为每个盒子左右边距设置它。

它应该看起来像那个图像 enter image description here

Answer 1

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

@fluidGridColumnWidth

和

@fluidGridGutterWidth

Answer 2

您没有遵循Bootstrap网格语法。你的.col- *元素应该在.row中，而therow应该在.container中。应用正确的嵌套，你会没事的。

Answer 3

请检查以下内容：

行必须放在.container（固定宽度）或.container-fluid（全宽）内，以便正确对齐和填充。

使用行创建水平的列组。

内容应放在列中，只有列可能是行的直接子项。

列通过填充创建装订线（列内容之间的间隙）。该填充在第一列和最后一列的行中通过.rows

上的负余量进行偏移

read

Answer 4

首先，您应该将列包装成一行。 <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 grid system

如何在twitter引导程序中水平对齐3个框？

4 个答案: