css - 垂直堆叠 Bootstrap 输入组控件

Question

因此，bootstrap 的输入组控件的正常行为是水平堆叠在 100% 的容器内。我想做的是将它们堆叠在一起，而不是这样:

我要这个:

(如果你想知道，垂直图像是由 paint 完成的:))

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

<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>

还有这个(我认为 bootstrap 不支持)

<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>

Vertical Aligned with thin border