问Bootstrap 4-3列布局博客水平定位
EN

Stack Overflow用户

提问于 2017-10-15 07:31:13

回答 1查看 33关注 0票数 2

为一个博客项目做bootstrap 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>

html

css

twitter-bootstrap

回答 1

Stack Overflow用户

发布于 2017-10-15 07:42:48

1.Bootstrap使用12列网格系统，.col-*-2 + .col-*-6 + .col-*-6 = 14。

2.你的屏幕/视口大小。它比.col-md-*媒体查询断点“小”。这就是为什么你的专栏是堆叠的。

如果您真的希望列结构在其他屏幕/视口大小下保持不变--添加相应的引导类。.col-xs-*、.col-sm-*、.col-lg-*、.col-xl-*。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46750307

复制

相似问题

问Bootstrap 4-3列布局博客水平定位
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 4-3列布局博客水平定位EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 4-3列布局博客水平定位
EN