Question

如何在每个流体范围内保持输入字段内联？

            <div class="row-fluid show-grid">
                <div class="span6"><label>First Name:</label><input type="text"/></div>
                <div class="span6">span6</div>
            </div>
            <div class="row-fluid show-grid">
                <div class="span6">span6</div>
                <div class="span6">span6</div>
            </div>
            <div class="row-fluid show-grid">
                <div class="span6">span6</div>
                <div class="span6">span6</div>
            </div>

我将动态生成每一行。尝试将display:更改为inline-block级中的内联或show-grid但不起作用。

.show-grid [class*="span"] {
    background-color: #ddd;
    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;
}

Answer 1

您可以在每个form-inline中使用课程span6：

http://jsfiddle.net/TTVG8/

<强> HTML

<div class="row-fluid show-grid">
    <div class="span6 form-inline">
        <label>First Name:</label>
        <input type="text" />
    </div>
    <div class="span6">span6</div>
</div>
<div class="row-fluid show-grid">
    <div class="span6">span6</div>
    <div class="span6">span6</div>
</div>
<div class="row-fluid show-grid">
    <div class="span6">span6</div>
    <div class="span6">span6</div>
</div>

<强> CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.show-grid[class*="span"] {
    background-color: #ddd;
    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;
}

Answer 2

卡米尔是对的。更改为display:inline，或作为最后一个资源float:left;

Bootstrap：将输入字段保持在流体范围内

2 个答案: