【问题标题】:Bootstrap: Fix the text input positionBootstrap:修复文本输入位置
【发布时间】:2013-07-17 06:20:49
【问题描述】:

我的标签/输入字段为form-inline。标签文本已被换行,以便可以对齐表单域。但是当标签被包装时,它对应的输入字段正在垂直调整。我该如何解决这个问题?
HTML

<div class="row-fluid show-grid">
                <div class="span6 form-inline"><label class="pocLabel">First Name:</label><input type="text" required/></div>
                <div class="span6 form-inline"><label class="pocLabel">Middle Initial:</label><input type="text"  /></div>
            </div>
<div class="row-fluid show-grid">
                <div class="span6 form-inline"><label class="pocLabel">How long with current employer</label><input type="text"/></div>
                <div class="span6 form-inline"><label class="pocLabel">Middle Initial:</label><input type="text"/></div>
            </div>
            <div class="row-fluid show-grid">
                <div class="span6 form-inline"><label class="pocLabel">Last Name:</label><input type="text"/></div>
                <div class="span6 form-inline"><label class="pocLabel">Social Security Number:</label><input type="text"/></div>
            </div>

CSS

.col1 .col2 {
    width: 48%;
    word-wrap:break-word;
}

    label.pocLabel {
        width: 200px;

    }
    .show-grid [class*="span"] {
        text-align: left;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        min-height: 40px;
        line-height: 40px;
        margin-top: 10px;
        display: inline;
    }

【问题讨论】:

  • 我不明白你在问什么...你能尝试进一步解释吗?我用你发布的内容做了一个 jsfiddle...jsfiddle.net/szRYX
  • 我也不明白你想要什么。请澄清你的问题并包括一个你想要的部分。谢谢
  • 添加了截图。因此,包装其相应文本框的标签不是内联的。希望这会有所帮助
  • form-inline 应应用于表单。我建议您将标记更改为form-horizontal,并将控制组分为两列。阅读Bootstrap's docs on HTML forms

标签: html css twitter-bootstrap


【解决方案1】:

试着把vertical-align:middle;在标签上。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-08-09
    • 2012-10-13
    • 2014-03-29
    • 2018-10-21
    • 2021-09-02
    • 2022-07-27
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多