bootstrap 4具有多个按钮组的输入组

Question

寻求帮助将此输入组全部作为一组进行一行

以下是目前的样子以及我想要实现的目标。

注意：Active / Radio不是按钮，而是单选按钮。

示例小提琴：https://jsfiddle.net/h8kdpejk/3/

<div class="container">
    <div class="col-md-6 col-lg-6">

      <div class="input-group">

        <input type="text" class="form-control" id="input-field" name="input-field" placeholder="Enter text here">

        <div class="input-group-btn">

            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                <label class="btn btn-secondary active">
                    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
                </label>
                <label class="btn btn-secondary">
                    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
                </label>
                <button type="submit" class="btn btn-primary dropdown-toggle submit" data-toggle="dropdown">Submit</button>
                <div class="dropdown-menu">
                    <a id="dns" class="dropdown-item" href="javascript:void(0);">link 1</a>
                    <a id="file" class="dropdown-item" href="javascript:void(0);">link 2</a>
                </div>
            </div>

            </div>

      </div>

    </div>
</div>

Answer 1

您可以为display: flex !important;添加css btn-group。在稳定版本的bootstrap中有一个特殊的类d-flex。

演示：https://jsfiddle.net/d_potapov/h8kdpejk/29/