2
Arbeiten an einem Bootstrap 4-Layout für ein Blog-Projekt. Es wird 3 Spalten haben, aber sie sind in ihrem normalen Zustand - aufeinander gestapelt - nicht nebeneinander, wie sie sein sollten. Ich habe mich gefragt, ob Sie mir helfen können, das Problem mit meinem Code zu finden, da ich scheinbar etwas übersehen habe. Vielen Dank für Ihre Zeit.Bootstrap 4-3 Spaltenlayout Blog horizontal positioniert
<!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>