Bootstrap 5 - 将单选按钮内联和单选输入组并排放置答案

【问题标题】：Bootstrap 5 - Place Radio Buttons Inline and a Radio Input Group next to each otherBootstrap 5 - 将单选按钮内联和单选输入组并排放置
【发布时间】：2021-05-19 21:16:28
【问题描述】：

“简单”问题，我试图将几个单选按钮（内联）和一个单选输入组并排放置在同一行。出于某种原因，输入组换到了新的一行。

代码如下：

<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

谢谢

【问题讨论】：

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

标签： css twitter-bootstrap bootstrap-5

【解决方案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>

Demo

【讨论】：

【解决方案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- 类以获得所需的确切宽度。请参阅此处的引导文档：https://getbootstrap.com/docs/4.0/components/forms/#form-grid

【讨论】：