垂直STACK引导程序输入组控件

Question

因此，引导程序输入组控件的正常行为是在容器100％内进行水平堆叠。我想做的是将它们彼此堆叠，而不是这样：

我要这个：

（如果您想知道，垂直图像是通过油漆完成的：）

到目前为止，我已经尝试过

<div class="input-group">
    <span class="input-group-addon">One</span>
    <select class="form-control"><option>1</option></select>
</div>
<div class="input-group">
    <span class="input-group-addon">One</span>
    <select class="form-control"><option>1</option></select>
</div>

这（我认为引导程序不支持）

<div class="input-group">
    <div class="input-group">
        <span class="input-group-addon">One</span>
        <select class="form-control"><option>1</option></select>
    </div>
    <div class="input-group">
        <span class="input-group-addon">One</span>
        <select class="form-control"><option>1</option></select>
    </div>
</div>

如您所见，它按照我希望的那样堆叠-只是它非常小（未跨越容器的100％）并且连接的零件具有边界半径。

我是否必须篡改/覆盖输入组的CSS样式以实现我的目标，还有其他其他首选/支持的方法吗？

Answer 1

我刚刚将其与 Bootstrap 4 一起使用。我添加了一个额外的 CSS 规则，以删除输入字段之间的粗边框。

.vertical-input-group .input-group:first-child {
    padding-bottom: 0;
}
.vertical-input-group .input-group:first-child * {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;    
}
.vertical-input-group .input-group:last-child {
    padding-top: 0;
}
.vertical-input-group .input-group:last-child * {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.vertical-input-group .input-group:not(:last-child):not(:first-child) {
    padding-top: 0;
    padding-bottom: 0;
}
.vertical-input-group .input-group:not(:last-child):not(:first-child) * {
    border-radius: 0;
}  
.vertical-input-group .input-group:not(:first-child) * {
    border-top: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="vertical-input-group">
    <div class="input-group">
        <input type="text" class="form-control" id="sao" placeholder="Attention Of">
    </div>

    <div class="input-group">
        <input type="text" class="form-control" id="ad1" placeholder="Line 1">
    </div>
    
    <div class="input-group">
        <input type="text" class="form-control" id="ad2" placeholder="Line 2">
    </div>

    <div class="input-group">
        <input type="text" class="form-control" id="ad3" placeholder="Line 3">
    </div>
    <div class="input-group">
        <input type="text" class="form-control" id="ad4" placeholder="Line 4">
    </div>

    <div class="input-group">
        <input type="text" class="form-control" id="ad5" placeholder="City">
    </div>

    <div class="input-group">
        <input type="text" class="form-control" id="county" placeholder="County">
    </div>

    <div class="input-group">
        <input type="text" class="form-control" id="postalcode" placeholder="Postal Code">
    </div>

</div>

垂直与细边框对齐