如何减少表单水平引导程序中表单控件之间的空间？

Question

我有一个表格水平

＆＃13;

＆＃13;

$ ls word-count.txt
_SUCCESS   part-00000 part-00001 part-00002
$ cat word-count.txt/part-00000
(u'world', 1)
$ cat word-count.txt/part-00001
(u'Hello', 1)
(u'hello', 1)

＆＃13;

＆＃13;

＆＃13;

这是输出

我想减少两个输入之间的间距。我怎样才能做到这一点？

Answer 1

您可以向包含输入的列添加新类，例如叫做输入＆＃39;。像这样：

 <div class="col-lg-3 input">
    <input type="text" class="form-control" />
  </div>

然后通过将左右边距填充到您需要的任何内容来设置宽度的样式。

.input {
  padding-right: 0;  
  padding-left: 0;
}

{{3}}

Answer 2

您可以通过减少.col - * - *元素上的填充来移动这些元素。您将覆盖引导程序样式，以确保您的选择器足够具体，以使更改生效。

＆＃13;

＆＃13;

.form-horizontal .col-xs-3 {
  padding:0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-xs-6">Discount Terms</label>
      <div class="col-xs-3">
        <input type="text" class="form-control" />
      </div>
      <div class="col-xs-3">
        <input type="text" class="form-control" />
      </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以从第一个col-lg-3和 padding-left padding-right >从第二个。为了解决每个元素，您可以使用nth-child：

＆＃13;

＆＃13;

.form-horizontal .col-lg-3:nth-of-type(1) {
  padding-right: 2px;
}
.form-horizontal .col-lg-3:nth-of-type(2) {
  padding-left: 2px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-lg-6">Discount Terms</label>
        <div class="col-lg-3">
            <input type="text" class="form-control" />
        </div>
        <div class="col-lg-3">
            <input type="text" class="form-control" />
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;