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>

flex container

这不是内联形式，我试图在第一个输入和第二个跨度之间放置空格。因此在输入id mfr和材料名称的范围之间。

Answer 1

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

将输入放在XS列中，然后减少列的填充，使两个输入之间的空间不大。

参见工作片段。

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

＆＃13;

.rechts {
    -webkit-box-shadow: 0 10px 7px #000;
    -moz-box-shadow: 0 10px 7px #000;
    box-shadow: 0 10px 7px #000;
}

＆＃13;

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

＆＃13;

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

1 个答案: