Question

在我的一生中，我似乎无法获得内联而不是堆叠无线电选项。

这是代码-只是一个简单的姓名，年龄，性别等表格。

此处的运行示例：https://jsfiddle.net/a0cbo5rz/2/

<div class="row justify-content-center align-items-center" style="height:100vh">    
    <div class="col-4">
         <div class="card">
            <div class="card-body">
                <form action="" autocomplete="off" method="post">
                    <label for="nickname">Nickname: </label>
                    <div class="form-group">
                        <input type="text" id="nickname" class="form-control" name="nickname" placeholder="Enter nickname" required>
                    </div>
                    <label for="gender">Gender:</label>
                    <div class="form-inline">
                        <label class="radio inline">
                            <input type="radio" name="gender", id="Male", checked="checked" value="M">
                            Male
                        </label>
                    </div>
                    <div class="form-inline">
                        <label class="radio inline">
                            <input type="radio" name="gender", id="Female", value="F">
                            Female
                        </label>
                    </div>
                    <label for="age">Age: </label>
                    <div class="form-group">
                        <input type="number" id="age" min="18" max="99" class="form-control" name="age" placeholder="Age" required>
                    </div>
                    <label for="country">Country: </label>
                    <div class="form-group">
                        <input type="text" id="country" class="form-control" name="country" placeholder="Select country" required>
                    </div>
                    <label for="location">Location: </label>
                    <div class="form-group">
                        <input type="text" id="location" class="form-control" name="location" placeholder="Location" required>
                    </div>
                    <input type="submit" name="login-form-complete" value="Login" />
                </form>
            </div>
        </div>
    </div>
</div>

Answer 1

看看这个，这可能对您有帮助。

<div class="row justify-content-center align-items-center" style="height:100vh">
    <div class="col-4">
        <div class="card">
            <div class="card-body">
                <form action="" autocomplete="off" method="post">
                    <label for="nickname">Nickname: </label>
                    <div class="form-group">
                        <input type="text" id="nickname" class="form-control" name="nickname" placeholder="Enter nickname" required>
                    </div>
                    <label for="gender">Gender:</label><br>
                        <label class="radio inline">
                            <input type="radio" name="gender", id="Male", checked="checked" value="M">
                            Male
                        </label>
                        <label class="radio inline">
                            <input type="radio" name="gender", id="Female", value="F">
                            Female
                        </label><br>
                    <label for="age">Age: </label>
                    <div class="form-group">
                        <input type="number" id="age" min="18" max="99" class="form-control" name="age" placeholder="Age" required>
                    </div>
                    <label for="country">Country: </label>
                    <div class="form-group">
                        <input type="text" id="country" class="form-control" name="country" placeholder="Select country" required>
                    </div>
                    <label for="location">Location: </label>
                    <div class="form-group">
                        <input type="text" id="location" class="form-control" name="location" placeholder="Location" required>
                    </div>
                    <!--                            <button type="button" id="sendlogin" class="btn btn-primary">Login</button>
                     -->
                    <input type="submit" name="login-form-complete" value="Login" />
                </form>
            </div>
        </div>
    </div>
</div>

似乎无法使我的收音机与Bootstrap内联

1 个答案: