html - Textarea 在 bootstrap 中内联多行

Question

我正试图想出一个如下所示的模板:

 Label  Input               Label   Input
 Label  Input               Label   Input
 Label  Textarea            Label   Input
        Textarea (cont.)    Label   Input

目前我似乎无法弄清楚使用 Bootstrap 执行此操作的方法。

这是我目前拥有的(在 JS Fiddle 上):

<div class="container">
    <div class="row">
        <div class="col-sm-1">Label 1</div>
        <div class="col-sm-2">
            <input id="input1" name="input1" type="text" value="" maxlength="50"/>
        </div>
        <div class="col-sm-1">Label 2</div>
        <div class="col-sm-2">
            <input id="input2" name="input2" type="text" value="" maxlength="50"/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-1">Label 3</div>
        <div class="col-sm-2">
            <input id="input3" name="input3" type="text" value="" maxlength="50"/>
        </div>
        <div class="col-sm-1">Label 4</div>
        <div class="col-sm-2">
            <input id="input4" name="input4" type="text" value="" maxlength="50"/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-1">Label 5</div>
        <div class="col-sm-2">
            <textarea id="textarea" name="textarea" rows="5" cols="17"></textarea>
        </div>
        <div class="col-sm-1">Label 6</div>
        <div class="col-sm-2">
            <input id="input6" name="input6" type="text" value="" maxlength="50"/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-offset-3 col-sm-1">Label 7</div>
        <div class="col-sm-2">
            <input id="input7" name="input7" type="text" value="" maxlength="50"/>
        </div>
    </div>
</div>

这会产生如下所示的内容:

 Label  Input               Label   Input
 Label  Input               Label   Input
 Label  Textarea            Label   Input
        Textarea (cont.)
                            Label   Input

很明显，问题是我将文本区域放在行中，但我想不出还有什么地方可以放置它以获得我想要的输出。

有什么想法吗？

Answer 1

查看我在此 bootply 中使用的格式.

代码:

<div class="container">
<div class="col-xs-12 col-sm-12 col-md-1">
    <div>Label</div>
    <div>Label</div>
    <div>Label</div>
</div>
  <div class="col-xs-12 col-sm-12 col-md-3">
    <input id="input1" name="input1" type="text" value="" maxlength="50">
    <input id="input2" name="input2" type="text" value="" maxlength="50">
    <textarea id="textarea" name="textarea" rows="5" cols="17"></textarea>
</div>
  <div class="col-xs-12 col-sm-12 col-md-1">
    <div>Label</div>
    <div>Label</div>
    <div>Label</div>
    <div>Label</div>
</div>
    <div class="col-xs-12 col-sm-12 col-md-3">
    <input id="input3" name="input3" type="text" value="" maxlength="50">
    <input id="input4" name="input4" type="text" value="" maxlength="50">
    <input id="input5" name="input5" type="text" value="" maxlength="50">
    <input id="input6" name="input6" type="text" value="" maxlength="50">
</div>

我将标签和输入分成 4 列，您可能需要一些额外的 CSS 来更好地排列标签，但这可以解决您的间隙问题。