Question

我在这里有一个JSFiddle：

我在<div></div>标签之间有连续的元素，但是它们都出现在不同的行上：

相关代码为：

           <div class="col-10 d-inline">
              <input type="text" class="form-control form-control-sm d-inline" style="width: 40px;"> <label class="col-form-label col-form-label-sm d-inline"> days </label>
              <select type="field" class="form-control form-control-sm ml-2" style="width:210px">
                 <option value="each">each </option>
              </select>
              <button type="button" class="btn btn-sm btn-primary ml-auto"> My Button </button>
           </div>

如何使所有元素都显示在同一行上？

编辑：为澄清起见，我对保留元素对齐（即彼此齐平）不感兴趣。我想将所有元素放在一行中。

Answer 1

您的问题是，您的选择的宽度为210像素，并且具有显示块（它试图显示在其行上），因此您可以将其设置为display:inline并对其宽度进行一些处理，或者您可以简单地父div，显示flex（首选第一种解决方案）

Answer 2

删除此类ml-2

<select type="field" class="form-control form-control-sm" style="width:210px">
       <option value="each">each </option>
</select>

https://jsfiddle.net/vpLk90xb/

Answer 3

您必须进行一些更改，添加display:inline-block;margin: 0 10px;并从选择元素中删除类ml-2

<select type="field" class="form-control form-control-sm " style="width:210px;display:inline-block;margin: 0 10px;">
                     <option value="each">each </option>
                  </select>

请参阅https://jsfiddle.net/copyb367/

Answer 4

对于col-10，我使用d-flex而不是d-inline

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-content pl-3 pr-3">
  <div class="modal-body">
    <div class="modal-body-scrolled border-primary border-bottom p-0 mt-2">
      <div>
        <div class="row mb-2">
          <div class="col-2"></div>
          <div class="col-10 d-flex">
            <input type="text" class="form-control form-control-sm d-inline" style="width: 40px;"> <label class="col-form-label col-form-label-sm d-inline"> days </label>
            <select type="field" class="form-control form-control-sm ml-2" style="width:210px">
                     <option value="each">each </option>
                  </select>
            <button type="button" class="btn btn-sm btn-primary ml-auto"> My Button </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 5

如果要使用内联表单（所有输入字段都在同一行中），请使用bootstrap内联表单：

driver.findElement(By.name("txtAnswer")).sendKeys("green");

输出：

Answer 6

检查Bootstrap documentation是否有内联表单。这是您的代码：

<div class="modal-content pl-3 pr-3">
   <div class="modal-body">
      <div class="modal-body-scrolled p-0 mt-2">
         <div class="form-inline">
           <div class="form-group">
               <input type="text" class="form-control form-control-sm d-inline" style="width: 40px;">                        <label class="col-form-label col-form-label-sm ml-2 d-inline"> days</label>
           </div>
           <div class="form-group mx-sm-5">
             <select type="field" class="form-control form-control-sm" style="width:210px">
               <option value="each">each </option>
             </select>
           </div>
           <button type="button" class="btn btn-sm btn-primary">My Button</button>
         </div>
      </div>
   </div>
</div>

https://jsfiddle.net/032oawv9/

在Bootstrap中，如何将所有元素都放在同一行上？

6 个答案: