Question

我正在编写注册表单的代码，因为我从另一个文件导入电话号码列的代码，但是当我将代码放入你可以看到@include（'layouts.phone'）;它显示如

当我放置@include（'layouts.phone'）;在@extends和@section之间，它显示为

我不知道为什么它的工作任何建议对我来说都很棒

@extends('layouts.app')
@section('content')

<div class="container">
 <link href="{{ asset('public/css/form.css') }}" rel="stylesheet">


<!-- One "tab" for each step in the form: -->

<div id="registerusers">
<center >
<div class="row" style="margin-left: 250px;margin-top: 50px">

    <div class="col-md-2 box" onclick="selectImage('indivisual')">
      <label class="btn btn-primary"><img src="{{asset('public/images/user.png')}}" alt="..." class="img-thumbnail img-check">
        <input type="radio" name="chk1" id="item4" value="val1" hidden="" class="hidden" autocomplete="off">
      </label>
      indivisual
    </div>

    <div class="col-md-2 box" onclick="selectImage('agent')">
      <label class="btn btn-primary">
        <img src="{{asset('public/images/user.png')}}" alt="..." class="img-thumbnail img-check">
        <input type="radio" name="chk1" id="item4" value="val2" class="hidden" hidden="" autocomplete="off">
      </label>
    </div>

    <div class="col-md-2 box" onclick="selectImage('vendor')">
      <label class="btn btn-primary">
        <img src="{{asset('public/images/user.png')}}" alt="..."  class="img-thumbnail img-check">
        <input type="radio" name="chk1" id="item4" value="val3" hidden="" class="hidden" autocomplete="off">
      </label>
    </div>


    <div class="col-md-2 box" onclick="selectImage('service')">
      <label class="btn btn-primary">
        <img src="{{asset('public/images/user.png')}}" alt="..." class="img-thumbnail img-check">
        <input type="radio" name="chk1" id="item4" value="val4" hidden="" class="hidden" autocomplete="off">
      </label>
      </div>

</div>

    <br>
    <input id="register" style="width: 200px" type="button" onclick="check()" value="Register" class="btn btn-success">

  </center>

  </div> 

<div id="indivisual" class="hid">
   <form id="regForm" action="">


<!-- One "tab" for each step in the form: -->
<div class="tab">Basic Info




                    <div class="form-group row">
                            <label for="user_firstname" class="col-md-4 col-form-label text-md-right">{{ __('First Name') }}</label>

                            <div class="col-md-6">
                                <input id="user_firstname" type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="user_firstname" value="{{ old('user_firstname') }}" required autofocus>


                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="user_lastname" class="col-md-4 col-form-label text-md-right">{{ __('Last Name') }}</label>

                            <div class="col-md-6">
                                <input id="user_lastname" type="text" class="form-control{{ $errors->has('user_lastname') ? ' is-invalid' : '' }}" name="user_lastname" value="{{ old('user_lastname') }}" required autofocus>

                            </div>
                        </div>


                        <div class="form-group row">
                            <label for="user_phone" class="col-md-4 col-form-label text-md-right">{{ __('Phone Number') }}</label>

                            <div class="col-md-6">

                              @include('layouts.phone')
                            </div>
                        </div>

                       <div class="form-group row">
                            <label for="user_email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required>


                            </div>
                        </div>


                         <div class="form-group row">
                            <label for="username" class="col-md-4 col-form-label text-md-right">{{ __('Username') }}</label>

                            <div class="col-md-6">
                                <input id="username" type="text" class="form-control{{ $errors->has('username') ? ' is-invalid' : '' }}" name="username" value="{{ old('username') }}" required autofocus>

                            </div>
                        </div>


                        <div class="form-group row">
                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>


                            </div>
                        </div>

                         <div class="form-group row">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">Confirm Password</label>

                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
                            </div>
                        </div>






</div>

<div class="tab">Contact Info:
  <p><input placeholder="E-mail..." oninput="this.className = ''"></p>
  <p><input placeholder="Phone..." oninput="this.className = ''"></p>
</div>

<div class="tab">Birthday:
  <p><input placeholder="dd" oninput="this.className = ''"></p>
  <p><input placeholder="mm" oninput="this.className = ''"></p>
  <p><input placeholder="yyyy" oninput="this.className = ''"></p>
</div>

<div class="tab">Login Info:
  <p><input placeholder="Username..." oninput="this.className = ''"></p>
  <p><input placeholder="Password..." oninput="this.className = ''"></p>
</div>

<div style="overflow:auto;">
  <div style="float:right;">
    <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
    <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
  </div>
</div>

<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
  <span class="step"></span>
  <span class="step"></span>
  <span class="step"></span>
  <span class="step"></span>
</div>

</form> 
</div>  <!-- indivisual form -->






<div id="agent" class="hid">
 <h2> agentForm </h2>
</div> <!-- agent form -->


<div id="vendor" class="hid">
 <h2> vendorForm </h2>

</div>
 <!-- vendor form -->

<div id="service" class="hid"> 
<h2> serviceForm </h2>
</div> <!-- service form -->

</div> <!-- Container -->
<br>



 <script src="{{ asset('public/js/form.js') }}"></script>

@endsection

Answer 1

看起来你的两个css属性相互重叠。您可以将！important 用于要显示的媒体资源。

有关详细信息，请参阅此document。

CSS或JS是最重要的

1 个答案: