2
ブログプロジェクト用のブートストラップ4レイアウトで作業しています。 3つの列がありますが、それらの列は通常の状態になります。つまり、列が並んでいるわけではありません。私が何かを見落としているように見えるので、あなたが私のコードで問題を見つけるのを助けることができるかどうか疑問に思っていました。御時間ありがとうございます。ブートストラップ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>