在引导模态上并排放置Div

Question

我有一个bootstrap模式，我希望两个数据部分并排。以下是我的模态主体和＆＃34;要报告的数据＆＃34; ＆＃34;排序依据＆＃34;部分应该并排。

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

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

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

我希望他们能够并肩而立。我试过＆＃34; float：left＆＃34;和＆＃34;显示：内联＆＃34;但这些似乎不起作用。任何帮助，将不胜感激。感谢。

Answer 1

尝试使用Bootstrap标记优势。你可以完成你需要做的事情

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

Answer 2

你需要将标题标记放在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>

CSS

.modal-body {
  width: 750px;
}

.checkbox {
  float: left;
}

.radio {
  float: right;
}