Bootstrap内联块级元素显示

Question

Bootstrap内联块级元素显示

4

我有一个任务，需要使用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

你的意思是只有HTML和Bootstrap？Bootstrap包含CSS和Javascript。 - TidyDev

请问您能否更清楚一些，您想要做什么？ - Evrard-c

@SusobhanDas 将他人的实质性代码复制到他们的SO问题中会侵犯其许可权。将代码发布在此处是OP的责任和特权，因为这样做可以在CC by-SA下授权，这是一种具有法律影响力的许可证。请不要进行此类编辑。 - TylerH

@SusobhanDas：感谢您想要在Stack Overflow上编辑帖子。我是一名经验丰富的编辑者，刚刚才了解到Tyler所提到的规则，所以不用担心不知道它。您可以在此处阅读更多信息。 - halfer

4个回答

1

请记得在未来将代码粘贴到问题中。

这个CSS会使列表水平显示而不是垂直显示。

.list-group,
.list-group-item{
  display: inline-block;
}

- TidyDev

1

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

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

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

- DCR

0

由于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/

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

来源：https://getbootstrap.com/docs/3.3/components/#media

- Ella

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Evrard-c · Accepted Answer

要在不创建其他CSS规则的情况下使用Bootstrap，我认为你应该按照以下方式使用Bootstrap网格系统：

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