gpt4 book ai didi

html - Bootstrap 内联 block 显示

转载 作者:可可西里 更新时间:2023-11-01 13:21:31 26 4
gpt4 key购买 nike

<分区>

我的任务是仅使用 HTML 和 BOOTSTRAP 构建一个网站,但我遇到了侧边导航栏的一些问题(代码附在下面)。为什么我的代码的结果不是显示为两个内联 block 而是一个接一个地显示 block 。我使用 bootstrap 预定义类“d-inline-block”,但它仅在第二个 div 元素中的段落短于一行时才有效。我想做两个 block ,一个在左边,比如导航 block ,一个在右边,右边有一些信息。

<!DOCTYPE html>
<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>
</div>
</body>
</html>

请指出我的错误或建议应该在代码中添加什么。

(任务是只使用 HTML 和 BOOTSTRAP(我不能添加自己的 CSS 代码。我只能使用预定义的 BOOTSTRAP 类))

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com