Question

我在stackoverflow上读了关于将两个div并排放置的方法。他们提出了两种不同的技术，我想知道最好的方法。您可以阅读帖子here。我试图自己找到是否有另一种解决方案，因为它们对我来说看起来有点奇怪。我找到了第三种解决方案。

有人对于将两个div放在一起的最佳方法有任何想法吗？

以下是我找到的三种解决方案。

解决方案1

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            ONE
        </div>
        <div class="col-xs-6">
            TWO
        </div>
    </div>
</div>

解决方案2

<table class="table table-condensed">
 <td class="active">Place image here</td>
 <td class="success">Place text here</td>
</table>

解决方案3

<div class="d-inline-block">one</div>
<div class="d-inline-block">two</div>

编辑：我可能需要再解释一下我的问题。我想在标题的左侧做一个带标题的自举卡，右侧有一些动作按钮。使用第三种解决方案，我最终会得到类似的东西。

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="card">
  <div class="card-header">
    <h3 class="card-title d-inline-block">title</h3>
    <div class="float-right d-inline-block">
      <button type="button" class="btn btn-sm btn-primary">action</button>
    </div>
  </div>
  <div class="card-body">
    <span>body</span>
  </div>
</div>

＆＃13;

这是做这种事情的好方法，还是有更好的方法？例如，第一个解决方案，很多人说这是最好的解决方案。

我正在学习bootstrap，我真的想了解更多关于最佳实践的知识。因此，我也对理解每种解决方案感兴趣，在什么样的背景下，最好使用另一种解决方案。

感谢您分享您的知识以及您允许这个问题的时间。

Answer 1

我建议你使用第一个解决方案，因为它是打算使用Bootstrap网格的方式。

您可以找到有关它的更多信息here

在“工作原理”部分下，您有一套规则/指南，您可以在使用Bootstrap网格时参考这些规则/指南，以便按正确的顺序获取每个标记/类名。

在页面的下方，您将找到许多有关如何使用Bootstrap网格的其他有用信息和示例，以及如何正确使用它。

Answer 2

我非常确定最佳实践是解决方案1，因为这是一个引导示例..

它也适用于响应式设计。

将两个div并排放在bootsrap 4

2 个答案: