Question

是否可以堆叠类似于Button groups - Vertical variation的字段，最好是混合使用字段和按钮，以便所有元素看起来都连在一起？

据我所知：

<div class="form-group btn-group-vertical" >
    <label for="id_address_finder" class="control-label">Input Label</label>
    <div class="controls">
        <input class="textinput textInput form-control" type="text" />
    </div>
    <button type="button" class="btn btn-primary btn-block">Button Text</button>
</div>

该按钮似乎已加入＆＃39;上面的字段，因为连接角不圆，但相同的效果不适用于该字段。

Answer 1

这似乎运作良好......

Fiddle

我们需要从文本字段和textareas中删除border-radius和border-top，以便它们在边框上看起来均匀而不是双倍。

<style>
    .grp-btn {
        border-radius: 0;
        border-top: 0;
    }
</style>

<div class="btn-group-vertical" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Button</button>
    <button type="button" class="btn btn-default">Button</button>
    <input type="text" name="fname" class="form-control grp-btn" placeholder="first name...">
    <input type="text" name="lname" class="form-control grp-btn" placeholder="last name...">
    <textarea class="form-control grp-btn" placeholder="comments..."></textarea>
    <button type="button" class="btn btn-primary">Submit</button>
</div>

我可以使用Bootstrap 3堆叠字段和其他元素吗？

1 个答案: