Blade 使用 twitter bootstrap 错误？答案

【问题标题】：Using twitter bootstrap wrong with blade?Blade 使用 twitter bootstrap 错误？
【发布时间】：2014-05-06 13:49:38
【问题描述】：

在使容器及其内容在移动设备上友好，同时在桌面上友好时遇到问题。

当我将 .jumbotron 的 CSS 编辑为宽度：1350 像素时。它在桌面上显示完美：

浏览器宽度较小时看起来如何，我必须滚动浏览器的中心:

当我将 .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;   

}

【问题讨论】：

为什么要将表单元素包装在表格中？ - 这可能无法解决您的问题：bootsnipp.com/forms?version=3 但最好使用类似的东西，而不是使用表格来格式化表格。
您绝对不应该使用表格来布置表格。 Bootstrap 文档向您展示了如何做到这一点：getbootstrap.com/css/#forms
完全同意，这种情况下的表格让我在怀旧的恐惧中颤抖
我试过了，但是输入框的宽度很大。

标签： css twitter-bootstrap laravel blade

【解决方案1】：

即使表格标记可能已经过时，我不会影响响应能力。我发现您的代码存在两个主要问题。首先，您似乎缺少一个尾随 </div>，因此请添加到 @stop 之前。

第二件事是，而不是.jumbotron，我认为您正在寻找的是.container 来获得居中的最大宽度容器。

如果我错了，你基本上想要做的是使用max-width: 1350px;，然后设置width: 100%。可以想象，如果屏幕低于 1350 像素，会发生什么情况，它只会保持在 100%。然后，如果您想将此框居中，请使用margin: auto;。我不确定您是否使用 display: inline-block; 完成了任何特定操作，您可能还想将其更改为 block。

【讨论】：