Question

.test,
.test2 {
  display: inline-block;
}

<div class="container">
  <div class="row">

    <div class="test">
      <button type="button" class="btn btn-success">Success</button></div>

    <div class="test2">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta odit omnis maiores quis, tempore ut dolorum iure, nesciunt dolores laboriosam cumque praesentium blanditiis porro repellat numquam. Ducimus, dolores atque accusantium!
      </span>
    </div>

  </div>
</div>

http://jsfiddle.net/x1hphsvb/6270/

我有两个要彼此相邻的div。

Answer 1

为此将display: flex;添加到.row

http://jsfiddle.net/x1hphsvb/6277/

.test, .test2 {
  display: inline-block;
}
.row {display: flex;}

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="row">
 
<div class="test">
<button type="button" class="btn btn-success">Success</button></div>

<div class="test2">
   <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta odit omnis maiores quis, tempore ut dolorum iure, nesciunt dolores laboriosam cumque praesentium blanditiis porro repellat numquam. Ducimus, dolores atque accusantium!
  </span>
</div>
   
</div>
</div>

要了解有关显示属性的更多信息- https://www.w3schools.com/cssref/pr_class_display.asp

Answer 2

由于您的.test2 div上没有max-width或width属性，因此第二个div的宽度被视为屏幕的宽度以容纳文本。尝试将两者之一放在.test2上。应该可以。

Answer 3

似乎您正在使用引导程序，因此请使用引导程序网格系统。我使用过col-sm-2和col-sm-10类，删除了test＆test2类

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">

    <div class="col-sm-2">
      <button type="button" class="btn btn-success">Success</button></div>

    <div class="col-sm-10">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta odit omnis maiores quis, tempore ut dolorum iure, nesciunt dolores laboriosam cumque praesentium blanditiis porro repellat numquam. Ducimus, dolores atque accusantium!
      </span>
    </div>

  </div>
</div>

display：inline-block不起作用

3 个答案: