Question

我正在使用Bootstrap而我在将两个div放在一起时遇到了麻烦。我尝试过显示：内联，这让它看起来更糟糕。我创建了一个div来保持它们都被称为 steven-and-leah 并获得相同的结果，但是如果使用特定类型的内联，例如 inline-flex ，我会得到一个接近我想要的结果，但它们太靠近了，使用时不能分开。

如果这不够具体，我很抱歉，但我没有发现任何影响代码的事情。

.steven-and-leah{
  display: inline;
}

.team-bx{
  width: 500px;
  height: 570px;
  margin-top: 80px;
  border: 5px solid #FFF;
  border-radius: 120px;
  padding: 20px 0px 20px 0px;
  overflow: hidden;
  background-color: #111924;
}

Answer 1

你试过这个吗？查看演示

.steven-and-leah > * {
    display: inline-block;
}

Demo

Answer 2

你在这里使用bootstrap错了。请记住，Bootstrap的强度在它的网格上。

如果你想将两个div放在一起，你只需要对它们应用一个-6（£是你要定位的设备）。例如：

<div class="row">
<div class="col-md-6">div number one!</div>
<div class="col-md-6">div number two!</div>
</div>

这会自动将两个div放在彼此旁边，就好像它们是“内联”一样，并且它们的巨大优势会自动响应。

如果这不是您的问题，请重新构建。

您可以在getting started网站

中找到很好的示例

将Divs“内联”放置在Bootstrap中

2 个答案: