在刀片上使用twitter bootstrap有誤？

在使容器及其內容移動友好且在桌面上同時友好的情況下出現問題。在刀片上使用twitter bootstrap有誤？

當我編輯.jumbotron的CSS爲寬度：1350px。它顯示在桌面完美：

enter image description here

它的外觀與瀏覽器的寬度較小，我必須滾動瀏覽器 enter image description here 中心：

當我編輯.jumbotron寬度爲auto它顯示了完美的移動：

enter image description here

但不是在臺式機：

enter image description here

刀片代碼：

@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; 

}

來源

2014-03-27 user3185936

爲什麼要將表單元素包裝在表格中？ - 這可能無法解決您的問題：http：//bootsnipp.com/forms？version = 3，但最好使用類似的東西，而不是使用表格來格式化表單。 –

你絕對不應該使用表格來佈置你的表格。引導文件告訴你如何去做：http://getbootstrap.com/css/#forms –

完全同意，在這種情況下表格讓我在懷舊恐懼中顫抖 –

即使表標記可能已過時，我不影響反應速度。我發現你的代碼有兩個主要問題。首先，它看起來像缺少一個尾隨</div>，所以加入之前的@stop。

第二件事，而不是.jumbotron，我想你要找的是.container來獲得中心最大寬度容器。

如果我錯了，你基本上想要做的是使用max-width: 1350px;，然後設置width: 100%。你可以想象，如果屏幕低於1350px，它會保持100％。然後，如果您想要將此框居中，請使用margin: auto;。我不確定您是否完成了與display: inline-block;相關的任何操作，您可能還想將其更改爲block。

來源

2014-03-28 00:18:09 Genie

在刀片上使用twitter bootstrap有誤？

回答

相關問題