0

如何在每个流体跨度中保持输入字段内联？

            <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;
}
4

2 回答 2

2

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;
}
于 2013-07-16T17:56:53.547 回答
0

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

于 2013-07-16T17:47:47.210 回答