Bootstrap 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

Thanks

- Nite

---

请记住，在问题本身中需要包含代码。"问题应更新以包括所需的行为、特定的问题或错误，以及重现问题所必需的最短代码。"外部链接往往会随着时间的推移而发生变化，使问题对未来读者无用。 - Carol Skelly

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>

演示

- Zim

Answer 2

使用标准的Bootstrap网格布局，像这样：

<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

- RCB