Question

我正在尝试排成一行两个输入框，Name和Email。下面将是消息的textarea。我希望两个输入框占据网格系统中的6列以及textarea。

使用 form-inline 我无法弄清楚如何获取两个输入框的宽度来扩展列的整个宽度。有什么想法吗？

http://www.bootply.com/yL5atrBZfX

<form role="form">
    <div class="row">
        <div class="form-inline col-md-6 col-centered">
            <input type="text" class="form-control" id="inputName" placeholder="Name">
            <input type="email" class="form-control" id="inputEmail" placeholder="Email Address">
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-centered form-group">
            <textarea class="form-control" style="resize: none" cols="5" rows="10" placeholder="Message" id="MessageBox"></textarea>
        </div>
    </div>
</form>

Answer 1

将内部Name和Email输入包含在另一行内，其中两列占据行的整个宽度：

http://www.bootply.com/WOvj1ygeAx

<div class="row">
    <div class="col-md-6 col-centered">
        <div class="row">
            <div class="col-md-6">
                <input type="text" class="form-control" id="inputName" placeholder="Name">
            </div>
            <div class="col-md-6">
                <input type="email" class="form-control" id="inputEmail" placeholder="Email Address">
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6 col-centered form-group">
        <textarea class="form-control" style="resize: none" cols="5" rows="10" placeholder="Message" id="MessageBox"></textarea>
    </div>
</div>

修改：也只是一个注释，form-inline不属于col-*元素，就像您提供的示例一样。它应该用在<form>元素上。基于您提供的示例，此处似乎多余。请参阅：Bootstrap CSS - Forms

Bootstrap内联表单输入宽度

1 个答案: