同一行元素之间的引导填充或边距答案

【问题标题】：Bootstrap padding or margin between elements on same line同一行元素之间的引导填充或边距
【发布时间】：2016-02-08 22:34:48
【问题描述】：

我是 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>

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

【问题讨论】：

我认为您可以创建一个类“input-group-addon-right”并将其添加到 Material Name span 元素中。然后你应该给那个类一个你想要的margin-left。编辑：这是一个 jsfiddle：jsfiddle.net/djuawovn
您提出的建议以及我已经厌倦的所有类似解决方案只是在 Material Name 周围创建了灰色框以更大而不是造成间隙。
哦，我明白了。您应该在现有的 col-lg-5 中创建两个新列，在其中放置每个输入字段和跨度。必要时，您可以为这些新列添加一个类以添加边距。明天我可以给你一个 jsfiddle，只是关掉我的笔记本电脑。

标签： css twitter-bootstrap margin padding

【解决方案1】：

您可以使用网格而不是在一组中使用多个附加组件。

将您的输入放在 XS 列内，然后减少列的填充，这样两个输入之间的空间就不会那么大。

查看工作片段。

*旁注：我举了一个额外的例子，因为附加组件非常大，以至于在移动设备上几乎没有可用的输入空间，这可能很重要，也可能无关紧要。

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

【讨论】：

从输入组中拆分列 div 就是答案。所以一个 div 作为列，然后一个 div 作为输入组。