Bootstrap 同一行元素之间的填充或边距

Question

我是 bootstrap 的新手，我有以下代码。

 <form name="filesearch" id="filesearch" method="post" action="index.cfm">
      <div class="input-group col-lg-5">
           <span class="input-group-addon"><input name="searchBy" id="mfrmtrlRadio" type="radio">Manufacturer</span>
           <input id="mfr" name="mfr" type="text" class="form-control">
           <span class="input-group-addon">Material Name</span>
           <input id="mtrlname" name="mtrlname" type="text" class="form-control">
      </div>
 </form>

这不是内联表单，我试图在第一个输入和第二个跨度之间放置 space。所以在输入id mfr 和Material Name 的span 之间。

Answer 1

您可以使用网格而不是在一个组内使用多个加载项。

将您的输入放在 XS 列内，然后减少列的填充，使两个输入之间的 space 不那么大。

查看工作片段。

*旁注：我再举一个例子，因为附加组件非常大，以至于在移动设备上几乎没有可用的输入 space，这可能重要也可能不重要。

.no-gutter >[class*='col-'] {
  padding-right: 5px;
  padding-left: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="well">
  <p>XS Columns</p>
</div>
<form role="form" method="post" id="myForm">
  <div class="container">
    <div class="row no-gutter">
      <div class="col-xs-6">
        <div class="input-group"> <span class="input-group-addon">
                        <input type="radio" aria-label="..."> Manufacturer</span>

          <input type="text" class="form-control" aria-label="...">
        </div>
      </div>
      <div class="col-xs-6">
        <div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span>

          <input type="text" class="form-control" aria-describedby="basic-addon1">
        </div>
      </div>
    </div>
  </div>
</form>
<hr>
<div class="well">
  <p>SM Columns</p>
</div>
<form role="form" method="post" id="myForm">
  <div class="container">
    <div class="row no-gutter">
      <div class="col-sm-6">
        <div class="form-group">
          <div class="input-group"> <span class="input-group-addon">
                        <input type="radio" aria-label="..."> Manufacturer</span>

            <input type="text" class="form-control" aria-label="...">
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-group">
          <div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span>

            <input type="text" class="form-control" aria-describedby="basic-addon1">
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
<hr>

Bootstrap 同一行元素之间的填充或边距

Bootstrap padding or margin between elements on same line

css

margin

padding

twitter-bootstrap