블레이드를 사용하는 트위터 부트 스트랩이 잘못 되었습니까?

Question

컨테이너와 콘텐츠를 모바일 친화적으로 만드는 동시에 데스크톱에서 동시에 친숙하게 사용하는 데 문제가 있습니다.

.jumbotron에 대한 CSS를 너비 : 1350px로 편집 할 때.

내가 자동으로 .jumbotron 폭을 편집 할 때 :

은 브라우저의 작은 폭으로 보이는 방법

, 난 브라우저 의 중심을 이동해야합니다 : 그것은 바탕 화면에 완벽하게 보여줍니다 그것은 모바일 완벽하게 보여줍니다

하지만 바탕 화면에서 :

블레이드 코드 :

@extends('default') 

@section('content') 

<div class="jumbotron"> 
<div class="container"> 
<br> 
<h2><span class="glyphicon glyphicon-time"></span> Times målinger </h2> 
<hr> 
    @if(Session::has('message')) 
     <p style="color: green;">{{ Session::get('message') }}</p> 
     @endif 
<div class="row formgroup"> 



    @if($errors->has()) 
     <ul> 
      {{ $errors->first('badendeTime', '<li>:message</li>') }} 
      {{ $errors->first('temp', '<li>:message</li>') }} 
     </ul> 
    @endif 


    <div class="col-lg-6"> 
    {{ Form::open(array('url' => 'bassengweb/insertHT', 'method' => 'POST')) }} 
    <table> 
     <tr> 
      <td>{{ Form::label('pool_id', 'Basseng:') }}</td> 
      <td>{{ Form::select('pool_id', $pools, Input::old('pool_id')) }}</td> 
     </tr> 

     <tr> 
      <td>{{ Form::label('Badende_per_Time', 'Badende per Time:') }}</td> 
      <td>{{ Form::text('Badende_per_Time', Input::old('Badende_per_Time')) }}</td> 
     </tr> 

     <tr> 
      <td>{{ Form::label('Temperatur', 'Temperatur:') }}</td> 
      <td>{{ Form::text('Temperatur', Input::old('Temperatur')) }}</td> 
     </tr> 

     <tr> 
      <td> </td> 
      <td>{{ Form::submit('Lagre', array('class' => 'btn btn-primary')) }}</td> 
     </tr> 
    </table> 
    {{ Form::close() }} 


     </div> 


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

    {{ Form::open(array('url' => 'bassengweb/insertHT', 'method' =>'POST')) }} 
    <table> 
     <tr> 
      <td>{{ Form::label('Luft_Temperatur', 'Luft Temperatur: ') }}</td> 
      <td>{{ Form::text('Luft_Temperatur', Input::old('Luft_Temperatur')) }}</td> 
     </tr> 

     <tr> 
      <td> </td> 
      <td>{{ Form::submit('Lagre', array('class' => 'btn btn-primary')) }}</td> 
     </tr> 
    </table> 
     {{ Form::close() }} 

    </div> 





    </div> 
    </div> 

@stop 

CSS는 :

이

.jumbotron { 

    text-align: center; 
    display: inline-block; 
    margin-bottom: auto; 
    width: auto; 


} 

.formgroup { 
    margin: auto auto; 


} 


h2 { 

    text-align: center; 
    margin-top: auto; 
    } 

.container { 
    min-height: 530px; 
    /* set border styling */ 
    border-color: black; 
    border-style: solid; 
    border-width: 1px; 


    /* set border roundness */ 
    border-radius: 15px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    margin: 0 auto auto; 
    width: auto; 
    display: inline-block; 

/* height: 400px; */ 
background-color: white; 

} 

Answer 1

테이블 마크 업이 오래된 될 수 있지만, 내가 응답에 영향을주지 않습니다. 귀하의 코드에 두 가지 주요 문제점이 있습니다. 첫째, 누락 된 사람이 </div> 인 것처럼 보이므로 @stop 앞에 추가하십시오.

둘째로, .jumbotron 대신에, 당신이 찾고있는 것이 .container 인 것 같습니다. 센터링 된 최대 너비 컨테이너입니다.

내가 틀렸다면, 당신이 근본적으로하고 싶은 것은 max-width: 1350px;을 사용하고 나서 width: 100%으로 설정하십시오. 상상할 수 있듯이 화면이 1350 픽셀 미만으로 떨어지면 화면이 100 %로 유지됩니다. 그런 다음이 상자를 가운데에 놓으려면 margin: auto;을 사용하십시오. display: inline-block;과 관련된 작업을 수행하는 경우 확실하지 않으므로 block으로 변경할 수도 있습니다.