如何在 <p> 标记中的单词之间添加间距并将它们与下一个 div 中的文本框对齐

Question

以下是我写的表单的代码：

<div class="container-fluid" id="unlabelled">
            <p class="bg-primary">Items<span>Quantity</span><span>In Kit</span></p>
            <form>
                <div class="form-group col-lg-5">
                    <input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
                </div>
                <div class="form-group col-md-2">
                    <input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
                </div>
                <div class="form-group">
                    <input type="checkbox"  id="in-kit">
                    <button class="btn-primary" id="add-btn">Add</button>
                </div>
            </form>
            </div>

我在这里使用引导程序。我有一个 class="bg-primary" 的顶部段落标题，它为标题提供了一个很好的背景。我有两个文本输入字段，一个复选框和一个按钮。我想将上一段中的文本与这些字段对齐。

https://imgur.com/XinA1kT

我希望 Items 文本与第一个文本字段居中对齐，Quantity 与第二个文本字段居中对齐，In kit 与复选框居中对齐。

正如您在我的代码中看到的，我在文本周围添加了 span 标签。我通过向这些跨度标签添加边距属性来进行试验，但它不能正常工作。我尝试了一堆，它工作正常，但我至少需要 15 到 20 个，这甚至没有解决我的问题。

有没有其他选择？我什至可以为 p 标签尝试其他替代方法。

谢谢。

Answer 1

这至少可以让您入门，它只是 rows 和 columns 以及一些小的 CSS。你会遇到的问题是在移动设备上，如果你想让它保持完全水平，它就会开始崩溃。

.well-md.well-head {
  background: #3973a6;
  border: none;
  color: #fff;
  font-size: 18px;
  height: 60px;
  text-align: center;
}
.checkbox {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form>
    <div class="row well well-md well-head">
      <div class="col-xs-4">
        <p>Items</p>
      </div>
      <div class="col-xs-3">
        <p>Quantity</p>
      </div>
      <div class="col-xs-3">
        <p>In Kit</p>
      </div>
    </div>
    <div class="row">
      <div class="form-group col-xs-4">
        <input type="text" class="form-control" id="unlabelled-items" name="unlabelled-items" placeholder="Enter code or description">
      </div>
      <div class="form-group col-xs-3">
        <input type="text" class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity">
      </div>
      <div class="form-group">
        <div class="form-group col-xs-3">
          <div class="form-group">
            <div class="checkbox">
              <input type="checkbox" id="in-kit" name="in-kit">
            </div>
          </div>
        </div>
        <div class="form-group col-xs-2">
          <button class="btn btn-primary" id="add-btn">Add</button>
        </div>
      </div>
    </div>
  </form>
</div>

Answer 2

您需要将文本描述符放入与您输入的列匹配的列中。像这样：

<div class="container-fluid" id="unlabelled">
<p class="bg-primary">
            <div class="row">
           <div class="form-group col-md-5"> Items</div>
            <div class="form-group col-md-2">Quantity</div>
            <div class="form-group col-md-2">In Kit</div>
</div>
</p>
        <form>
            <div class="form-group col-md-5">
                <input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
            </div>
            <div class="form-group col-md-2">
                <input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
            </div>
            <div class="form-group">
                <div class="form-group col-md-2">
                <input type="checkbox"  id="in-kit">
                    </div>
                     <div class="form-group col-md-2">
                <button class="btn-primary" id="add-btn">Add</button>
                    </div>
            </div>
        </form>
        </div>