3 分箱不适合容器答案

【问题标题】：3 Div boxes do not fit in the container3 分箱不适合容器
【发布时间】：2017-10-23 02:16:29
【问题描述】：

在页面上：jerkydirect.com/base/opportunity - 带有图片的容器中有 3 个框。然而，当在大屏幕上观看时 - 最后一个框贴在右侧。它在较小的窗口或移动设备上看起来很棒，但在较大的屏幕上却不行。我如何让它正确对齐？

代码如下：

<section class="plan-box opportunity">
  <div class="container">
    <div class="row">
      <h2>Choose Your Crave:</h2>

      <div class="col-xs-12 col-sm-12 col-md-12">
        <center>
          <div class="package">
            <h3>Twin Pack</h3>
            <p>2 BAGS</p>
            <ul>
              <li><span>Affiliate Price: </span><span>$19.75</span></li>
              <li><span>Retail Price:</span><span>$21.75</span></li>
              <li><span>Commission Payout:</span><span>$5.00</span></li>
            </ul>
          </div>
        </center>
      </div>

      <div class="col-xs-12 col-sm-12 col-md-4">
        <div class="package">
          <h3>family Pack <span></span></h3>
          <p>4 BAGS</p>
          <ul>
            <li><span>Affiliate Price: </span><span>$39.50</span></li>
            <li><span>Retail Price:</span><span>$41.50</span></li>
            <li><span>Commission Payout:</span><span>$10</span></li>
          </ul>
        </div>
      </div>

      <div class="col-xs-12 col-sm-12 col-md-4">
        <div class="package">
          <h3>Party Pack <span></span></h3>
          <p>10 BAGS</p>
          <ul>
            <li><span>Affiliate Price: </span><span>$79.75</span></li>
            <li><span>Retail Price:</span><span>$87.75</span></li>
            <li><span>Commission Payout:</span><span>$15</span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

【问题讨论】：

标签： html twitter-bootstrap-3 containers

【解决方案1】：

您的HTML 代码没问题。

问题在于您的CSS

.package {
  width: 350px;
  height: 230px;
  background-color: rgba(0,0,0,0.6);
  border: 15px solid rgba(52,53,48,0.6);
  margin: 50px 0 0;
  padding: 25px 20px;
}

您不应该使用一些 pixel 值对宽度进行硬编码，而是删除像素值。

希望这会对你有所帮助。

【讨论】：

【解决方案2】：

删除<div class="container"></div> 后面的<div class="container"></div>。
还有Content should be placed within columns, and only columns may be immediate children of rows.

【讨论】：

这正是我需要它做的！为您提供解决方案和额外资源！

【解决方案3】：

从 css 中的 .package div 中删除 width: 350px。

#service-one .package {
   width: auto !important;
}

或者在 css 文件中添加这个样式

【讨论】：