css - Wordpress 主题问题中的 Bootstrap 网格框架

Question

我在使用 Wordpress 中的 Bootstrap 网格框架时遇到问题。我正在尝试创建一个网格。 2 行。第一行是一列，第二行是三列，它们之间有一点空间。站点上的列堆叠成行而不是并排。 Bootstrap 文档说如果你不在 col 之后使用类似 sm-3 的东西，那么它会自动生成宽度。

有问题的页面:http://dev.dragonscaletech.com/our-story/

<div id="shoutOuts">
<div class="container">
  <div class="row">
    <div class="col">
      <h1>Shout Outs!</h1>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <h4>The TitanTough21 Foundation</h4><br>
      <p>An amazing foundation formed to find a cure for Li-Fraumeni Syndrome. Li-Fraumeni Syndrome is a rare genetic disorder that greatly increases the risk of developing several types of cancer, particularly in children and young adults. In addition,
        they work hard to help families pay their cancer bills.</p>
      <p>Learn more at: www.TitanTough21.org</p>
    </div>
    <div class="col">
      <h4>47 Films</h4><br>
      <p>A Digital Filmmaking Company based in Broward County, Florida.</p>
      <p>Really, a great company with great people.</p>
      <p>Learn more on Facebook: 47FilmsLLC</p>
    </div>
    <div class="col">
      <h4>Seagull Services</h4><br>
      <p>Assists individuals with life challenges by providing education, training, employment, residential services, community integration and support services.</p>
      <p>We are working with Seagull Services to assemble a manageable quantity of Back Scratch Scrubbers for us!</p>
      <p>Learn more at: www.SeagulServices.org</p>
    </div>
  </div>
</div>

Answer 1

出现此问题是因为您正尝试将 Bootstrap 4 语法与您网站上运行的 Bootstrap 3 结合使用。这2个混的不好。

解决方案:将第二行的col替换为col-xs-4，第一行的替换为col-xs-12。

或者，在您的网站上加载 Bootstrap 4 文件。

附言请记住，Bootstrap 4 中的 col 类和 Bootstrap 3 中的 col-xs-* 都是无响应的，即这些类定义了最小屏幕上发生的事情，而你可能不想在最小的屏幕上显示 3 列。所以，相应地进行调整。