Question

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

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等）添加到附加的选择器列表中。＆＃34; min-width：100％＆＃34;属性。快乐的黑客攻击。

如何减少bootstrap输入元素之间的差距

1 个答案: