Question

在Bottstrap 3中，我可以在输入文本之前使用内联标签两个无线电输入

             <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>

Bootsrap 4输入组前置，内联无线电标签不是内联的

2 个答案: