我有一個問題，爲什麼我的代碼的結果也不會顯示爲兩個同軸塊，但塊顯示了一個又一個。我使用引導程序預定義的類「d-inline-block」，但它僅適用於第二個div元素中的段落短於一行的情況。我想做一個左側的塊，就像一個導航塊，右側有一些信息。引導inline-block的顯示
我的代碼：http://pasted.co/96064fc9
，能不能請你告訴我我的錯誤或建議添加什麼。
（任務是僅使用HTML和自舉（我不能添加自己的CSS代碼，我只能使用預定義的自舉類））
要使用的引導，而無需創建其它CSS規則，我認爲你應該按如下方式使用引導電網：
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul class="list-group">
<li class="list-group-item">one</li>
<li class="list-group-item">two</li>
<li class="list-group-item">three</li>
<li class="list-group-item">four</li>
<li class="list-group-item">five</li>
</ul>
</div>
<div class="col-sm-6">
<h1>Lorem Ipsum</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</body>請記住，在這個問題的代碼粘貼在未來。
這個CSS將使列表顯示水平，而不是垂直的。
.list-group,
.list-group-item{
display: inline-block;
}
.d-inline-block{
width:50%;
float:left;
}<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="d-inline-block">
<ul class="list-group">
<li class="list-group-item">one</li>
<li class="list-group-item">two</li>
<li class="list-group-item">three</li>
<li class="list-group-item">four</li>
<li class="list-group-item">five</li>
</ul>
</div>
<div class="d-inline-block">
<h1>Lorem Ipsum</h1>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<!-- Replace this comment line by "Web Technology 1" homework solution. -->
\t </div>
</body>
</html>您的div的默認寬度爲100％。添加以下的CSS：
.d-inline-block{
width:50%;
float:left;
}
由於CSS不一個選項，在Bootstrap 4中，您可以使用媒體對象類在其一側創建一個對象，旁邊有文本，但不包括在下面。他們給出的例子使用圖像，但你也可以放入文本。
<div class="media">
<div> Text</div>
<div class="media-body">
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
來源：http://getbootstrap.com/docs/4.0/layout/media-object/
引導3也有類似的介質類。
<div class="media">
<div class="media-left">
LEFT
</div>
<div class="media-body">
This text will wrap without going underneath the media-left div
</div>
</div>
你是什麼意思只有HTML和引導，引導是CSS和Javascript？ – TidyDev
請問你是否更清楚，你想要做什麼？ –