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 3时使用Bootstrap 4语法。那两个人不能很好地混在一起。

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

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

P.S。请记住，Bootstrap 4中的col类以及Bootstrap 3中的col-xs-*都没有响应，即这些类定义了最小屏幕上发生的事情，您可能不想要3列最小的屏幕。所以，相应地调整。

Answer 2

你可以在Bootstrap 3中使用col-md-offset-2 class ass described here，如果你使用的是Bootstrap 4，则不再有Offset类，所以你应该使用auto margins因为Bootstrap 4使用flexbox < / p>

这肯定解决了你的问题

Answer 3

在google上搜索了很多，发现了容器流体类。然后我搜索了Stack Overflow并找到了这篇文章。

Bootstrap 3 adding gutters to the grid system

我将代码修改为此，并得到了我正在寻找的内容！感谢所有给我更多东西的人。

<div id="shoutOuts">
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h1>Shout Outs!</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="container-fluid">
        <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>
    <div class="col-sm-4">
      <div class="container-fluid">
        <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>
    <div class="col-sm-4">
      <div class="container-fluid">
        <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>
</div>

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

3 个答案: