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

处理博客项目的引导4布局。它会有3列，但它们的位置正常状态下彼此堆叠在一起 - 并非如他们应该的那样并排排列。我想知道你是否可以帮我找到我的代码的问题，因为我似乎忽略了一些东西。谢谢你的时间。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>

来源

2017-10-14 Anna Gibson

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

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

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

来源

2017-10-14 23:42:48 sgiant

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

回答

相关问题