Bootsrap 4 input-group-prepend with inline单选标签非inline

Question

在Bottstrap 3中，我可以在输入文本之前使用两个带有行内标签的单选inut

​

​

             <div class="input-group">
                <span class="input-group-addon">
                  <label>
                    <input checked type="radio"value="Mrs">Mrs
                  </label>
                </span>
                <span class="input-group-addon">
                  <label>
                    <input type="radio" value="Mr" >Mr
                   </label>
                </span>
                <input type="text" class="form-control">
             </div>

我正在尝试使用Bootstrap 4以相同的方式进行设置

            <div class="input-group">
                <div class="input-group-prepend">
                    <label class="form-group-label">
                        <input checked type="radio" value="Mrs">Mrs
                    </label>
                </div>
                <div class="input-group-prepend">
                    <label>
                        <input type="radio" name="gender" value="Mr">Mr
                    </label>
                </div>
               <input type="text" class="form-control" name="name" placeholder="Enter your full name">
            </div

但标签与无线电输入并不一致..

我哪里错了？感谢您的反馈

Answer 1

您需要使用input-group-text类将它们包装在div中。

另外，将pb-0类添加到input-group-text中，如下所示：input-group-text pb-0

下面是在Bootstrap 4中实现的正确方法：

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container">
    <div class="row">
        <div class="col">
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text pb-0">
                        <label class="form-group-label">
                            <input checked type="radio" name="gender" value="Mrs"> Mrs
                        </label>
                    </div>
                    <div class="input-group-text pb-0">
                        <label>
                            <input type="radio" name="gender" value="Mr"> Mr
                        </label>
                    </div>
                </div>
                <input type="text" class="form-control" aria-label="Text input with radio button">
            </div>
        </div>
    </div>
</div>

​

Answer 2

使用form-check和form-check-label类代替我在下面代码中使用的form-group。

​

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">1 radio button
  </label>
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">2 radio button
  </label>
</div>

​