为博客项目处理引导4布局。它将有3列,但它们的位置是在正常状态下堆叠在一起,而不是像应该的那样并排放置。我想知道你是否能帮我找到我的代码的问题,因为我似乎忽略了一些东西。谢谢你的时间。

      <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Blog Page</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="blog.css">
  </head>
  <body>

    <!---navigation-->
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Blog</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Resources</a>
      </li>

    </ul>
  </div>
</nav>
<!--end nav-->
<!--main heading-->
    <div class="jumbotron">
      <h1>Alice in Wonderland</h1>
    </div>
    <!--/main-heading-->

<!--blog-content-->
<div class="container-fluid">
  <div class="row">
<div class="col-2-md offset-md-1">

</div>

    <div class="col-6-md" id="col1">
      <h2>Heading 1</h2>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>

    <div class="col-6-md" id="col2">
      <h4>Popular Posts</h4>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>

最佳答案

一。Bootstrap使用12列网格系统,.col-*-2+.col-*-6+.col-*-6=14。
2。屏幕/视区大小。它比.col-md-*媒体查询断点“小”。这就是为什么你的专栏是堆叠的。
如果您真的希望columns结构保持在其他屏幕/视图大小,那么添加相应的引导类。.col-xs-*.col-sm-*.col-lg-*.col-xl-*

10-07 19:42
查看更多