列之间的引导空间

Question

我有一些输入：

我想使输入和+和=符号之间的空间更小。这是我的代码：

<div class="form-group">

                    <div class="col-lg-10 grupo">

                    <div class="col-lg-2 grupo">
                         <input id="num1" class="sum form-control input-sm" type="text"          name="num1" value=" {$unique_id}" readonly="readonly" /> </div>
                     <div class="col-lg-1 grupo">
                         <label class="" >+</label> </div>
                     <div class="col-lg-2 grupo">
                         <input id="num2" class="sum form-control input-sm" type="text" name="num2" value=" {$unique_id2}" readonly="readonly" /></div>
                     <div class="col-lg-1 grupo">
                         <label class="" >=</label> </div>
                     <div class="col-lg-4 grupo">
                         <input id="captcha" class="captcha form-control input-sm" type="text" name="captcha" style="width:20%" maxlength="2" />
                    </div>
            </div>
       </div>

如果我将输入和标签留在同一个col

中

Answer 1

有几种不同的方法可以做到这一点。这是一个简单，容易的方法来完成它并保持响应的质量：

http://jsfiddle.net/hHWeG/

.form-group span {
    margin-left: 0.75em;
}

<form class="form-inline" role="form">
  <div class="form-group">
    <input id="num1" class="sum col-xs-10 input-sm" type="text" name="num1" value=" {$unique_id}" readonly="readonly" /> <span>+</span>
  </div>

  <div class="form-group">
    <input id="num2" class="sum col-xs-10 input-sm" type="text" name="num2" value=" {$unique_id2}" readonly="readonly" /> <span>=</span>
  </div>

  <div class="form-group">
      <input id="input" class="col-xs-10 input-sm" type="text" name="" />
  </div>
</form>

Answer 2

标签位于具有col-lg-1类的div内，因此它们始终是整列的宽度。考虑将它们移动到与输入和样式相同的容器中。