bootstrap 4 个输入组和多个按钮组

Question

寻求帮助将此输入组作为一个组全部放在一行中

这是它目前的样子以及我正在努力实现的目标。

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

示例 fiddle 此处：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

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

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

bootstrap 4 个输入组和多个按钮组

bootstrap 4 input group with multiple button groups

bootstrap-4

twitter-bootstrap-4