Bootstrap 选择作为附加项的引导输入组

piwo6bdm  于 2023-03-10  发布在  Bootstrap
关注(0)|答案(2)|浏览(125)

无论我怎么尝试,我都无法将选择框作为插件输入。
这是我想要的

然而,我似乎不能让它的工作,通过以下输入组的引导指南:

<div class="input-group">
    <input type="text" class="form-control"/>
    <select class="form-control input-group-addon">
        <option>Item 1</option>
        <option>Item 2</option>
    </select>
</div>

jsfiddle demo
有人能帮帮我吗?我已经找了一段时间了!

wswtfjt7

wswtfjt71#

您可以通过向选区添加自定义样式来进行更改。
我向“input-group”添加了一个名为“select-group”的类,并将输入字段作为目标并选择。

超文本标记语言

<div class="input-group select-group">
    <input type="text" class="form-control"/>
        <select class="form-control input-group-addon">
            <option>Item 1</option>
            <option>Item 2</option>
        </select>

</div>

中央支助组

.select-group input.form-control{ width: 65%}
.select-group select.input-group-addon { width: 35%; }

演示here

pb3skfrl

pb3skfrl2#

<div class="input-group">
       <input type="text" class="form-control " placeholder="100">
       <div class="input-group-append">
         <select name="" id="" class="btn btn-outline-secondary dropdown-toggle" 
           type="button" data-toggle="dropdown" aria-expanded="false">
           <option class="dropdown-item" value="USD">USD</option>
           <option class="dropdown-item" value="%">%</option>
           <option class="dropdown-item" value="Coin">Coin</option>
         </select>
       </div>
</div>

相关问题