仅限统一文本字段 CSS/Bootstrap

Question

我希望有人能帮我解决这个问题。我正在尝试创建此示例：

这些是（三个）文本框。示例：

我尝试将文本框放在 div 旁边，并使其宽度非常低，并在其旁边对齐第二个文本框。我设置 border: none 然后 border-right：纯黑色 1px 但在 bootstrap 上我最终得到这样的结果：

Answer 1

张贴我自己的问题的答案，可能对以后的其他人有用。

我使用了以下 HTML:

<div class="addressMain">
    <div class="addressBorder">
        <div class="addressUnified">
            <input type="text" placeholder="No." class="small" ></input>
            <input type="text" placeholder="Address Details..." class="med"></input>
            <br>
            <input type="text" placeholder="" class="big"></input>
            <br>
            <input type="text" placeholder="" class="big"></input>
        </div>
    </div>

和以下 CSS：

.addressUnified .med{
    width: 80%;
    border: none;
    border-left: solid grey 1px;
    padding-left: 15px;
    outline: none
}

.addressUnified .big{
    width: 100%;
    border:none;
    padding-top: 5px;
    padding-left: 10px;
    outline: none
}

.addressUnified .small{
    width:10%;
    border:none;
    padding-left: 10px;
    padding-top: 10px;
    outline: none
}

.addressUnified{
    width: 100%;
    height:100px;
    border: solid grey 1px;
}

结果和我原题中想要的完全一样。感谢约翰的帮助！

注意，使用 !important 覆盖任何 bootstrap css。

仅限统一文本字段 CSS/Bootstrap

Unified textfields CSS/Bootstrap only

css

textbox

twitter-bootstrap