使表格移动友好的容器

时间:2014-03-28 08:53:58

标签: html css twitter-bootstrap laravel blade

尝试将两个表格组并排的容器看起来移动友好。使其左侧的形式位于另一个之下。试图改变容器的宽度但是没有用。

以下是代码:

hvertime.blade.php

<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




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





    {{ Form::open(array('url' => 'bassengweb/insertHT', 'method' => 'POST', 'class' => 'form-horizontal')) }}

  <div class="form-group">

    <label  class="col-md-5 control-label">Basseng: </label>
    <div class="col-md-7">

     {{ Form::select('pool_id', $pools, Input::old('pool_id'), array('placeholder'=>'Basseng', 'class' => 'form-control' )) }} 
    </div>
  </div>

  <div class="form-group">
    <label  class="col-md-7 control-label">Badende Per Time: </label>
    <div class="col-md-5" >
      {{ Form::text('T_Badende_per_Time', Input::old('T_Badende_per_Time'), array('placeholder'=>'', 'class' => 'form-control' ))  }}  
    </div>
  </div>

      <div class="form-group">
    <label  class="col-md-7 control-label">Temperatur: </label>
    <div class="col-md-5">
     {{ Form::text('T_Temperatur', Input::old('T_Temperatur'), array('placeholder'=>'', 'class' => 'form-control' )) }}  


    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-7 col-md-5">
       {{ Form::submit('Lagre', array('class' => 'btn btn-primary')) }}
    </div>
  </div>


      {{ Form::close() }}



     <div id="form-horizontal"> 

    {{ Form::open(array('url' => 'bassengweb/insertHT', 'method' => 'POST', 'class' => 'form-horizontal')) }}

         <div class="form-group">
        <label  class="col-md-7 control-label">Luft-Temperatur: </label>
        <div class="col-md-5">
         {{ Form::text('T_Luft_Temperatur', Input::old('T_Luft_Temperatur'), array('placeholder'=>'', 'class' => 'form-control' )) }}  


        </div>
      </div>

      <div class="form-group">
        <div class="col-md-offset-6 col-md-7">
           {{ Form::submit('Lagre', array('class' => 'btn btn-primary')) }}
        </div>
      </div>
            {{ Form::close() }}



      </div>



     </div>
        </div>

的main.css

.jumbotron {

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

.form-group {



}


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: auto auto auto;
    width: 900px;
    display: inline-block;
    background-color: white;   

}


.form-horizontal{
    float: left;   
}

0 个答案:

没有答案