Question

对于laravel项目，我使用元设计引导程序（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">

在身体的最后...

<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。要正确渲染单选按钮，应首先放置输入，然后放置标签。

单选按钮未显示在页面中

1 个答案: