Question

我试图将这些价格框放在中心位置。它被编程为4个盒子，但我只想要其中两个。我试着把这些盒子放在中间位置，但我无法找到解决方案。我希望有人可以帮助我吗？

这是我现在的HTML代码：

＆＃13;

<div id="fh5co-pricing-section">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3 text-center fh5co-heading animate-box">
                <h2>Pricing</h2>
                <p>Lorum ipsum</p>
            </div>
        </div>
        <div class="row">
            <div class="pricing">
                <div class="col-md-3 animate-box">
                    <div class="price-box">
                        <h2 class="pricing-plan">Caller</h2>
                        <div class="price"><sup class="currency">€</sup>2,50<small>/month</small></div>
                        <p>Lorum ipsum</p>
                        <a href="#" class="btn btn-select-plan btn-sm">Select Plan</a>
                    </div>
                </div>

                <div class="col-md-3 animate-box">
                    <div class="price-box">
                        <h2 class="pricing-plan">Watch</h2>
                        <div class="price"><sup class="currency">€</sup>11,50<small>/month</small></div>
                        <p>Lorum ipsum</p>
                        <a href="#" class="btn btn-select-plan btn-sm">Select Plan</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

这是我现在的CSS代码：

＆＃13;

#fh5co-pricing-section {
  padding: 7em 0;
  background: #fcfcfc;
}
@media screen and (max-width: 768px) {
  #fh5co-pricing-section {
    padding: 3em 0;
  }
}
#fh5co-pricing-section .pricing {
  display: block;
  float: left;
  margin-bottom: 30px;
}
#fh5co-pricing-section .price-box {
  text-align: center;
  padding: 30px;
  background: #fff;
  margin-bottom: 40px;
  position: relative;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.11);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.11);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.11);
  top: 2px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

＆＃13;

Answer 1

首先，你应该删除带有class row和col-md-3的div之间的class =“pricing”的div，否则你最终可能会遇到奇怪的布局行为。（通常尽可能严格地保持元素层次结构与引导类一样）下一步，将col-md-offset-3类添加到第一个列元素，在将项目移动到中间之前插入3列占位符。

请注意，如果您需要使用可变数量元素的动态布局，则应考虑使用flexbox（bootstrap 4内置了flex支持）

编辑：修复的html模板如下所示：

<div id="fh5co-pricing-section">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3 text-center fh5co-heading animate-box">
                <h2>Pricing</h2>
                <p>Lorum ipsum</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 col-md-offset-3 animate-box">
                <div class="price-box">
                    <h2 class="pricing-plan">Caller</h2>
                    <div class="price"><sup class="currency">€</sup>2,50<small>/month</small></div>
                    <p>Lorum ipsum</p>
                    <a href="#" class="btn btn-select-plan btn-sm">Select Plan</a>
                </div>
            </div>

            <div class="col-md-3 animate-box">
                <div class="price-box">
                    <h2 class="pricing-plan">Watch</h2>
                    <div class="price"><sup class="currency">€</sup>11,50<small>/month</small></div>
                    <p>Lorum ipsum</p>
                    <a href="#" class="btn btn-select-plan btn-sm">Select Plan</a>
                </div>
            </div>
        </div>
    </div>
</div>

中心的盒子？

1 个答案: