引导5-放置单选按钮内联和收音机输入组相邻。

Question

“简单”的问题，我试图把几个单选按钮(内联)和一个收音机输入组相邻，在同一条线上。由于某种原因，输入组转到一个新行。

以下是代码：

<div class="d-flex flex-wrap">
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="radioFilter" id="filter-none" checked>
        <label class="form-check-label" for="inlineRadio1">none</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="radioFilter" id="filter-1">
        <label class="form-check-label" for="inlineRadio2">filter 1</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="radioFilter" id="filter-2">
        <label class="form-check-label" for="inlineRadio2">filter 2</label>
    </div>
    <div class="input-group input-group-sm">
        <div class="input-group-text">
            <input class="form-check-input" type="radio" name="radioFilter">
        </div>
        <input type="text" class="form-control" aria-label="Text input with radio button">
    </div>
</div>

https://codeply.com/p/DAlKhU9atE

谢谢

Answer 1

删除flex-wrap。使用text-nowrap防止包装标签..。

<div class="d-flex">
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="radioFilter" id="filter-none" checked>
        <label class="form-check-label" for="inlineRadio1">none</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="radioFilter" id="filter-1">
        <label class="form-check-label text-nowrap" for="inlineRadio2">filter 1</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="radioFilter" id="filter-2">
        <label class="form-check-label text-nowrap" for="inlineRadio2">filter 2</label>
    </div>
    <div class="input-group input-group-sm">
        <div class="input-group-text">
            <input class="form-check-input" type="radio" name="radioFilter">
        </div>
        <input type="text" class="form-control" aria-label="Text input with radio button">
    </div>
</div>

演示

Answer 2

使用标准的引导网格。就像这样：

<div class="row">
    <div class="col-auto">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="radioFilter" id="filter-none" checked>
            <label class="form-check-label" for="inlineRadio1">none</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="radioFilter" id="filter-1">
            <label class="form-check-label" for="inlineRadio2">filter 1</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="radioFilter" id="filter-2">
            <label class="form-check-label" for="inlineRadio2">filter 2</label>
        </div>
    </div>
    <div class="col-auto">
        <div class="input-group input-group-sm">
            <div class="input-group-text">
                <input class="form-check-input" type="radio" name="radioFilter">
            </div>
            <input type="text" class="form-control" aria-label="Text input with radio button">
        </div>
    </div>
</div>

col-auto自动调整div的大小，只占用所需的空间。您可以根据需要将其更改为其他col-类，以获得所需的精确宽度。参见这里的Bootstrap文档：https://getbootstrap.com/docs/4.0/components/forms/#form-grid