Question

我有一个问题，为什么我的代码的结果不会显示为两个内联块，而是一个接一个地显示块。我使用bootstrap预定义类“d-inline-block”，但仅当第二个div元素中的段落短于一行时才有效。我想留下一个左边的两个街区，比如一个导航区，一个右边有一些信息。

我的代码：http://pasted.co/96064fc9

拜托，您能否告诉我我的错误或建议添加什么。

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

Answer 1

要使用bootstrap而不创建其他CSS规则，我认为你应该使用bootstrap网格，如下所示：

＆＃13;

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

＆＃13;

Answer 2

请记住以后将代码粘贴到问题中。

此CSS将使列表显示为水平而非垂直。

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

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

Answer 4

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

Bootstrap内联块显示

4 个答案: