col-md2元素之间的填充

Question

我的目标是在一行中显示6列。这是我如何完成它们的一部分（仅显示前3个）。

我有这段代码：

<div class="col-md-2">
  <input mytr="first_name" mytrId="" name="first_name[]" id="first_name" class="form-control" placeholder="First name" type="text">
</div>

<div class="col-md-2">
  <input mytr="middle_name" mytrId="" name="middle_name[]" id="middle_name"      class="form-control" placeholder="Middle name" type="text">
</div>

<div class="col-md-2">
  <input mytr="last_name" mytrId="" name="last_name[]" id="last_name" class="form-control" placeholder="Last name" type="text">
</div>

它产生以下控件，它们之间有填充：

我希望编辑只有1px的填充，并尽可能让它们彼此接近。

我为此课程添加了什么？如果可能的话？

Answer 1

您需要更改.col-md-2填充值。在下面的HTML中，我添加了要使用的.little-padding类，并进行了不同的填充。

<div class="container">
    <div class="row little-padding">
        <div class="col-md-2">
            <input mytr="first_name" mytrid="" name="first_name[]" id="first_name" class="form-control" placeholder="First name" type="text">
        </div>
        <div class="col-md-2">
            <input mytr="middle_name" mytrid="" name="middle_name[]" id="middle_name" class="form-control" placeholder="Middle name" type="text">
        </div>
        <div class="col-md-2">
            <input mytr="last_name" mytrid="" name="last_name[]" id="last_name" class="form-control" placeholder="Last name" type="text">
        </div>
    </div>
</div>

你可以拥有这个CSS。我给了padding-left:15px;和padding-right:15px;，而不是padding-left:0;和padding-right:1px;（这是Bootstrap的默认值）。

之后，我为第一个和最后一个孩子提供了默认的填充值，以便.col-md-2 div保留在.row内。

.row.little-padding .col-md-2 {padding-right:1px; padding-left:0;}
.row.little-padding .col-md-2:first-child {padding-left:15px;}
.row.little-padding .col-md-2:last-child {padding-right:15px;}

Here是一个有效的演示版。

注意：如果您希望此行为与其他类一起使用，则需要使用适用于所有[class^="col-"]类（demo here）的col-*选择器，但它可能不适用于所有情况。

Answer 2

您可以使用col的填充或使用form-inline，有关详情，请查看forms。