Bootstrap 4 网格系统

Question

在 Rails 上实现 Bootstrap Grid System 时遇到问题

我为侧边栏创建了一个部分，因此我不必将它复制到我的所有视图中。我在

中寻求的解决方案

application.html.erb

<div class="container-fluid">
  <div class="row-fluid">
      <div class="col-lg-8"><%= yield %></div>
      <div class="col-md-4"><%= render 'layouts/sidebar' %></div>
  </div>
  <!-- /.row -->
</div>

index.html.erb（开始）

    <!-- Page Content -->
<div class="container">

  <div class="row">

    <!-- Blog Entries Column -->
    <div>

      <h1 class="my-4">Page Heading
        <small>Secondary Text</small>
      </h1>

      <!-- Blog Post -->
      <div class="card mb-4">
        <img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">
        <div class="card-body">
          <h2 class="card-title">Post Title</h2>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p>
          <a href="#" class="btn btn-primary">Read More &rarr;</a>
        </div>
        <div class="card-footer text-muted">
          Posted on January 1, 2017 by
          <a href="#">Start Bootstrap</a>
        </div>
      </div>

_sidebar.html.erb

        <div>
      <!-- Search Widget -->
      <div class="card my-4">
        <h5 class="card-header">Search</h5>
        <div class="card-body">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for...">
            <span class="input-group-btn">
              <button class="btn btn-secondary" type="button">Go!</button>
            </span>
          </div>
        </div>
      </div>

Current Problem

它应该是什么样子—— https://blackrockdigital.github.io/startbootstrap-blog-post/

Answer 1

通过将我的 application.html.erb 中的 row-fluid 替换为仅行来解决它。如果有人可以向我解释为什么会发生这种情况，那将对我学习 Web 应用程序开发的旅程有很大帮​​助。谢谢！