Question

出于某种原因，当我尝试将导航栏添加到我的编辑页面时，我的视图变得混乱了。我不知道为什么会发生这种情况，我认为它可能是css的工作，但我尝试移动它们但没有任何事情发生。但是，当我尝试使用在移动视图中显示它的开发人员工具时，它再次变得整洁。任何人都可以向我解释发生了什么事吗？

这是刀片视图：

这是移动视图：

这是edit.blade.php：

@extends('layouts.app')
@section('title', 'Summary')
@section('content')
    <div class="container" style="background-color:#ADD8E6"> 
        <link href="{{ asset('css/homeStyle.css') }}" rel="stylesheet">
        <!DOCTYPE html>
        <html>
            <head></head>
            <body>
                <div class="form-group">
                    <form class="form-horizontal" method="post" action="{{ url('/user/show/'.$object->id) }}">
                        {{ method_field('PUT')  }}
                        {{ csrf_field() }}
                        <label class="col-md-2"><b>Name AS PER NRIC/PASSPORT:</b></label>
                        <div class="col-md-6">
                            <input type="text" name="Name" value="{{ $object->Name }}" class="form-control">
                        </div>
                        <label class="col-md-2"><b>Alias:</b></label>
                        <div class="col-md-6">
                            <input type="text" name="Alias" value="{{ $object->Alias }}" class="form-control">
                        </div>
                        <label class="col-md-2"><b>Email:</b></label>
                        <div class="col-md-6">
                            <input type="email" name="Email" value="{{ $object->Email }}" class="form-control">
                        </div>
                        <label class="col-md-2"><b>Mobile Number:</b></label>
                        <div class="col-md-6">
                            <input type="number" name="Mobile_No" value="{{ $object->Mobile_No }}" class="form-control">
                        </div>
                        <label class="col-md-2"><b>Telephone Number:</b></label>
                        <div class="col-md-6">
                            <input type="number" name="Tele_no" value="{{ $object->Tele_no }}" class="form-control">
                        </div>
                        <label class="col-md-2"><b>NRIC:</b></label>
                        <div class="col-md-6">
                            <input type="text" name="NRIC" value="{{ $object->NRIC }}" class="form-control">
                        </div>
                        <div class="form-group">
                            <div class="col-md-6-offset-2">
                            <input type="submit" class="btn btn-primary" value="Save">
                            </div>
                        </div>
                    </form>
                </div>
            </body>
        </html>
        @if(count($errors))
            @foreach($errors->all() as $error)
                <div class="alert alert-danger">
                    {{$error}}
                </div>
            @endforeach
        @endif
    </div>
@endsection

Answer 1

首先从中移除html头部和身体标签，因为布局已经存在，然后尝试添加带行的div并使其像行的大小为12，所以你需要做的就是让你的课程像它一样＃39 ; s等于12给你你想要的进一步检查bootstrap

@extends('layouts.app')
    @section('title', 'Summary')
    @section('content')
    <div class="container" style="background-color:#ADD8E6"> 
    <link href="{{ asset('css/homeStyle.css') }}" rel="stylesheet">

    <div class="form-group">
            <form class="form-horizontal" method="post" action="{{ url('/user/show/'.$object->id) }}">

              {{ method_field('PUT')  }}
              {{ csrf_field() }}


                <div class='row' >  
                  <label class="col-md-4"><b>Name AS PER NRIC/PASSPORT:</b></label>
                  <div class="col-md-8">
                  <input type="text" name="Name" value="{{ $object->Name }}" class="form-control">
                  </div>
                </div>


                <div class='row' >  
                  <label class="col-md-4"><b>Alias:</b></label>
                  <div class="col-md-8">
                  <input type="text" name="Alias" value="{{ $object->Alias }}" class="form-control">
                  </div>
                </div>

              <div class='row' >  
                <label class="col-md-4"><b>Email:</b></label>
                <div class="col-md-8">
                  <input type="email" name="Email" value="{{ $object->Email }}" class="form-control">
                </div>
              </div>

              <div class='row' >  
                <label class="col-md-4"><b>Mobile Number:</b></label>
                <div class="col-md-8">
                  <input type="number" name="Mobile_No" value="{{ $object->Mobile_No }}" class="form-control">
                </div>
              </div>

              <div class='row' >  
                <label class="col-md-4"><b>Telephone Number:</b></label>
                <div class="col-md-8">
                  <input type="number" name="Tele_no" value="{{ $object->Tele_no }}" class="form-control">
                </div>
              </div>

              <div class='row' >  
                <label class="col-md-4"><b>NRIC:</b></label>
                <div class="col-md-8">
                  <input type="text" name="NRIC" value="{{ $object->NRIC }}" class="form-control">
                </div>
              </div>

              <div class="form-group">
                <div class="col-md-8-offset-4">
                  <input type="submit" class="btn btn-primary" value="Save">
                </div>
              </div>

          </form>
    </div>
      @if(count($errors))
        @foreach($errors->all() as $error)
        <div class="alert alert-danger">
              {{$error}}
        </div>
         @endforeach
      @endif
    </div>
    @endsection

希望它会对你有所帮助！

凌乱的数据显示在刀片中，但不在移动视图中显示

1 个答案:

凌乱的数据显示在刀片​​中，但不在移动视图中显示

1 个答案:

凌乱的数据显示在刀片中，但不在移动视图中显示