单选按钮未在页面中显示

Question

对于 laravel 项目，我使用了元设计 bootstrap(MDBootstrap) 模板。使用此模板进行主设计，如果我需要添加一些东西，我会使用@yeild('')。一切都很好，但是如果想在表单中添加单选按钮，这个按钮没有显示在页面中。

这是我的脑袋 master.blade.php 用过的..

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>{{ config('app.name', 'Laravel') }}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<!-- Scripts -->


<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">

<!-- Styles -->

<link href="metarial/css/mdb.min.css" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="metarial/bootstrap.min.css" rel="stylesheet">

最后 body...

<script type="text/javascript" src="metarial/js/jquery-3.2.1.min.js"></script>


<!-- Tooltips -->
<script type="text/javascript" src="metarial/js/popper.min.js"></script>

<!-- Bootstrap core JavaScript -->
{{--
<script type="text/javascript" src="metarial/js/bootstrap.min.js"></script> --}}

<script src="{{ asset('js/app.js') }}" defer></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="metarial/js/mdb.min.js"></script>
<script>
    // SideNav Initialization
    $(".button-collapse").sideNav();

    new WOW().init();
</script>

形式是...

<form role="form" action="{{url('/children/add')}}" method="post" enctype="multipart/form-data">
        @csrf 

        <div class="form-group ml-4 mr-4">

            <div class="row">

                <div class="col-6">
                    <label for="name">First Name</label>
                    <input value="{{ old('firstName') }}" name="firstName" type="text" class="form-control" id="first" placeholder="First Name">
                </div>

                <div class="col-6">
                    <label for="name">Last Name</label>
                    <input value="{{ old('lastName') }}" name="lastName" type="text" class="form-control" id="last" placeholder="Last Name">
                </div>
            </div>
        </div>

        <div class="radio form-group ml-4 mr-4">
            <label><input type="radio" name="optradio">Male</label>
          </div>
          <div class="radio">
            <label><input type="radio" name="optradio">Female</label>
          </div>

        <div class="form-group ml-4 mr-4">
            <label for="Birthday">Birthday</label>
            <input name="birthday" type="date" class="form-control" id="birthday">
        </div>


        <div class="form-group ml-4 mr-4">
            <label for="image">Profile Image</label>
            <input type="file" name="image" class="form-control" id="image">
        </div>

        <button type="submit" style="background-color:#2DAE60;" class="btn">
            <i class="fa fa-plus"></i> ADD </button>
    </form>

此页面的图片缺少单选按钮，但文本 'Male'、'Female' 仍然存在...

有人能帮帮我吗？

Answer 1

尝试改变这个：

<div class="radio">
   <label><input type="radio" name="optradio">Female</label>
  </div>

为此：

<div class="radio">
   <input type="radio" id="female-rb" name="optradio" />
   <label for="female-rb">Female</label>
</div>

使用标签时，您应该定义标签适用于哪个单选按钮。您可以通过添加 for 属性并让它引用单选按钮的 ID 来做到这一点。要正确呈现单选按钮，您应该先放置输入，然后再放置标签。

单选按钮未在页面中显示

Radio button is not showing in page

php

twitter-bootstrap

laravel

bootstrap-4

mdbootstrap