html - 如何减少 Bootstrap 输入元素之间的差距

Question

我想减少表单输入元素之间的差距。

DEMO

HTML:

<form class="form-horizontal width-500 center-block theme-font" role="form">
    <div class="form-group form-group-sm">

        <label for="name" class="control-label col-xs-4">Guardian Name</label>
        <div class="col-xs-3 form-inline">
            <select class="form-control" id="village" required="required">
                <option>S/O</option>
                <option>D/O</option>
                <option>W/O</option>
                <option>C/O</option>
            </select>
            <div class="required-icon">
                <div class="text">*</div>
            </div>
        </div>

        <div class="col-sm-5 form-inline float-left">
            <input class="form-control" required="required" id="name" placeholder="Guardian Name" type="text">
            <div class="required-icon">
                <div class="text">*</div>
            </div>
        </div>

    </div>
</form>

Answer 1

如果你想使用它(稍后必须添加其他输入类型)，你可以将它添加到 CSS 中:

select, input {
  min-width: 100%; /* Force element to take up the whole column width */
}

.required-icon {
  position: absolute; /* Allow icon to stack within the 100% min-width input fields */
  right: 0; /* Force it to the right side of the block */
  top: 4px; /* Quick position fix */
}

.tooltip {
  left: -70px !important; /* Override and bring the tooltip behind the input fields */
}

希望这对您有所帮助。就像上面提到的那样，您必须将额外的输入字段(textarea 等)添加到附加“min-width: 100%”属性的选择器列表中。快乐的黑客。