新手上路，请多包涵

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

 <!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 类））

原文由 Aleksejs R 发布，翻译遵循 CC BY-SA 4.0 许可协议

html bootstrap-4

阅读 281

2 个回答

得票最新

社区维基

发布于
2022-12-19

✓ 已被采纳

要在不创建其他 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>

原文由 Evrard-c 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-19

 .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. -->

	     </div>

        </body>
</html>

div 的默认宽度为 100%。添加以下CSS：

 .d-inline-block{
width:50%;
float:left;
}

原文由 DCR 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

Bootstrap 内联块显示

你尚未登录，登录后可以

问一个鼠标滚动事件，这种是怎么实现的？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

threejs用octree实现房间内第三人称漫游并且添加了碰撞，人物在碰撞到墙壁的时候不停的弹回，应该怎么修改才能不会疯狂的弹回？

Vue为什么说textarea标签不支持插值表达式的？

为什么下面的代码内部的 div 其 100% 高度可以跳过上层元素?

单页应用网站缓存不是由于index.html文件被缓存导致的吗？

election嵌套了一个web项目通信为什么会中断?

Stack Overflow 翻译