html - Bootstrap 表单内联不与验证消息居中

标签 html css twitter-bootstrap twitter-bootstrap-3

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

我希望所有输入的高度相同(或居中),但问题是当我收到验证消息时。 演示: http://codepen.io/Tursky/pen/gpvgBL?editors=100

并且在 Input 下也有这条消息

谢谢你的帮助

<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>

最佳答案

您可以使用  (新空白的快捷方式)填充该空间。

工作示例 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>

关于html - Bootstrap 表单内联不与验证消息居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31169233/

相关文章:

html - 如何居中对齐 Bootstrap 进度条?

php - 显示bootstrap表中mysql表数据的内容

javascript - 覆盖按钮的 Jquery Mobile Css

html - iPad2、iPhone 4S 上的 iOS 网站加载问题

html - 字体不适用于所有浏览器

css - D3 图表 - 在刻度值和轴路径线之间放置空间

html - 列表元素底部对齐

css - 哪些图像元素应该获得 Retina 版本?

javascript - Wicked_PDF for Rails 中更好的分页符

javascript - Bootstrap 表 - 无法在 tr 上添加点击事件