Question

我在Bootstrap中需要内联表单的帮助。

我希望所有输入具有相同的高度（或居中），但问题是当我有验证消息时。 DEMO： http://codepen.io/Tursky/pen/gpvgBL?editors=100

并且在输入

下也有此消息

感谢您的帮助

<form class="col-xs-12">
<div class="form-inline row"  style="padding:25px;">
    <div class="form-group has-feedback">
        <label class="control-label" for="playerId">*Player ID</label>
        <input type="text" class="form-control player-input" id="playerId" name="playerId">
        <span id="playerIdError" class="help-block" >ERROR</span>
    </div>
    <div class="form-group has-feedback">
        <label class="control-label" for="playerId">*Player ID</label>
        <input type="text" class="form-control player-input" id="playerId" name="playerId">
        <span id="playerIdError" class="help-block" ></span>
    </div>
    <div class="form-group has-feedback">
        <label class="control-label" for="playerId">*Player ID</label>
        <input type="text" class="form-control player-input" id="playerId" name="playerId">
        <span id="playerIdError" class="help-block" ></span>
    </div>
    <div class="form-group has-feedback">
        <label class="control-label" for="playerId">*Player ID</label>
        <input type="text" class="form-control player-input" id="playerId" name="playerId">
        <span id="playerIdError" class="help-block" ></span>
    </div>
</div>

Answer 1

您可以使用 （新空格的快捷方式）填充该空格。

工作示例here。

<form class="col-xs-12">
    <div class="form-inline row"  style="padding:25px;">
        <div class="form-group has-feedback">
            <label class="control-label" for="playerId">*Player ID</label>
            <input type="text" class="form-control player-input" id="playerId" name="playerId">
            <span id="playerIdError" class="help-block" >ERROR</span>
        </div>
        <div class="form-group has-feedback">
            <label class="control-label" for="playerId">*Player ID</label>
            <input type="text" class="form-control player-input" id="playerId" name="playerId">
            <span id="playerIdError" class="help-block" >&nbsp;</span>
        </div>
        <div class="form-group has-feedback">
            <label class="control-label" for="playerId">*Player ID</label>
            <input type="text" class="form-control player-input" id="playerId" name="playerId">
            <span id="playerIdError" class="help-block" >&nbsp;</span>
        </div>
        <div class="form-group has-feedback">
            <label class="control-label" for="playerId">*Player ID</label>
            <input type="text" class="form-control player-input" id="playerId" name="playerId">
            <span id="playerIdError" class="help-block" >&nbsp;</span>
        </div>
    </div>
</form>

引导表单内联不是验证消息的中心

1 个答案: