Javascript 将div并排放置在引导模式上

我有一个引导模式，我希望两段数据并排。下面是我的模态体，“要报告的数据”和“排序依据”部分应该并排排列

换句话说，现在它看起来像：

要报告的数据
名字
排序
名字

---

我希望他们肩并肩。我尝试过“float:left”和“display:inline”，但这些似乎不起作用。任何帮助都将不胜感激。谢谢。

您需要将标题标记放入div中，然后为父（包装器）div创建一个宽度，然后浮动div

<div class="modal-body">
  <div class="checkbox">
      <h5>Data to report</h5>
      <label><input type="checkbox" class="print-options" value="first_name">First Name</label>
  </div>

  <div class="radio">
      <h5>Sort by</h5>
      <label><input type="radio" class="print-options" value="first_name">First Name</label>
  </div>
</div>

---

您需要将标题标记放入div中，然后为父（包装器）div创建一个宽度，然后浮动div

<div class="modal-body">
  <div class="checkbox">
      <h5>Data to report</h5>
      <label><input type="checkbox" class="print-options" value="first_name">First Name</label>
  </div>

  <div class="radio">
      <h5>Sort by</h5>
      <label><input type="radio" class="print-options" value="first_name">First Name</label>
  </div>
</div>

---

尝试使用引导标记的好处。你可以完成你需要做的事情

<div class="modal-body">
    <div class="row">
        <!-- Half of the modal-body div-->
        <div class="col-xs-6">
            <h5>Data to report</h5>
            <div class="checkbox">
                <label><input type="checkbox" class="print-options" value="first_name">First Name</label>
            </div>
        </div>
        <!-- Other half of the modal-body div-->
        <div class="col-xs-6">
            <h5>Sort by</h5>
            <div class="radio">
                <label><input type="radio" class="print-options" value="first_name">First Name</label>
            </div>
        </div>
    </div>
</div>

要报告的数据
名字
排序
名字

---

这样，您将同时拥有两个div。

尝试使用引导标记的优点。你可以完成你需要做的事情

<div class="modal-body">
    <div class="row">
        <!-- Half of the modal-body div-->
        <div class="col-xs-6">
            <h5>Data to report</h5>
            <div class="checkbox">
                <label><input type="checkbox" class="print-options" value="first_name">First Name</label>
            </div>
        </div>
        <!-- Other half of the modal-body div-->
        <div class="col-xs-6">
            <h5>Sort by</h5>
            <div class="radio">
                <label><input type="radio" class="print-options" value="first_name">First Name</label>
            </div>
        </div>
    </div>
</div>

要报告的数据
名字
排序
名字

---

这样，两个div就可以并排使用。

您是否尝试使用一个带有row的div，然后在其中使用两个带有col-xs-6类的div？效果非常好。谢谢，太好了！我的荣幸。我只是添加了一个更明确的答案，如果你尝试使用一个带行的div，那么在它里面，两个带col-xs-6 class？的div工作得很好。谢谢，太好了！我的荣幸。我只是添加了更明确的答案