1

Отступы неравномерные, видно плохо разбираюсь в разметке boostrap, помогите пожалуйста

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#hardFinishSessionModal">
  Launch modal
</button>

<div id="hardFinishSessionModal" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- Заголовок модального окна -->
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Введите данные для закрытия смены</h4>
          </div>
          <!-- Основное содержимое модального окна -->
          <form method="POST" class="form-inline" action="{{action('ResultsController@sessionHardFinish')}}">
            <div class="modal-body">
                <input type="hidden" name="_token" value="{{csrf_token()}}">
                <input type="hidden" id="session_id2" name="session_id" value="0">
                <div class="container-fluid">
                    <div class="form-group">
                        <label for="datetimerange" class="col-md-4 control-label">Время закрытия смены</label>
                           <div class="col-md-6">
                                 <input type="text" name="datetimerange" id="datetimeselector"  class="form-control"  value="01/01/2015 - 01/31/2015" /> 
                           </div>
                    </div>
                    <div class="form-group">
                        <label for="intotal" class="col-md-4 control-label">Денег в кассе</label>
                          <div class="col-md-6">
                                <input class="form-control" name="intotal" placeholder="Общая сумма в кассе  " value="{{old('intotal')}}">  
                          </div>
                    </div> 
                     <div class="form-group">
                        <label for="cash_total" class="col-md-4 control-label">Выручка: наличные деньги</label>
                         <div class="col-md-6">
                              <input class="form-control"  name="cash_total" placeholder="Наличные " value="{{old('cash_total')}}">  
                         </div>
                     </div> 
                     <div class="form-group">
                        <label for="card_total" class="col-md-4 control-label">Выручка: банковские карты</label>
                         <div class="col-md-6">
                             <input class="form-control"  name="card_total" placeholder="Карты" value="{{old('card_total')}}">   
                         </div>
                     </div> 
                     <div class="form-group">
                        <label for="encashment_total" class="col-md-4 control-label">Инкассация</label>
                         <div class="col-md-6">
                             <input class="form-control" name="encashment_total" placeholder="Инкассировано " value="{{old('encashment_total')}}" >  
                         </div>
                     </div> 
                     <div class="form-group">
                        <label for="wasted" class="col-md-4 control-label">Уплачено на доставку</label>
                         <div class="col-md-6">
                              <input class="form-control" name="wasted"placeholder="На доставку " value="{{old('wasted')}}">  
                         </div>
                     </div> 
                    <div class="form-group">
                        <label for="cups100" class="col-md-4 control-label">Стаканы 100</label>
                         <div class="col-md-6">
                             <input class="form-control" name="cups100"placeholder="Стаканы 100" value="{{old('cups100')}}">  
                         </div>
                     </div> 
                    <div class="form-group">
                        <label for="cups250" class="col-md-4 control-label">Стаканы 250</label>
                         <div class="col-md-6">
                             <input class="form-control" name="cups250"placeholder="Стаканы 250" value="{{old('cups250')}}">  
                         </div>
                     </div> 
                    <div class="form-group">
                        <label for="cups300" class="col-md-4 control-label">Стаканы 300</label>
                         <div class="col-md-6">
                             <input class="form-control" name="cups300"placeholder="Стаканы 300" value="{{old('cups300')}}">  
                         </div>
                     </div> 
                    <div class="form-group">
                        <label for="cups400" class="col-md-4 control-label">Стаканы 400</label>
                         <div class="col-md-6">
                             <input class="form-control" name="cups400"placeholder="Стаканы 400" value="{{old('cups400')}}">  
                         </div>
                     </div> 
                    <div class="form-group">
                        <label for="donuts_remain" class="col-md-4 control-label">Пончиков осталось</label>
                         <div class="col-md-6">
                             <input class="form-control" name="donuts_remain" placeholder="Оставшиеся пончики" value="{{old('donuts_remain')}}">  
                         </div>
                     </div> 
                    <div class="form-group">
                        <label for="donuts_garbage" class="col-md-4 control-label">Пончиков списано</label>
                         <div class="col-md-6">
                             <input class="form-control" name="donuts_garbage" placeholder="Списанные пончики" value="{{old('donuts_garbage')}}">  
                         </div>
                     </div> 
                </div>
            </div>
            <!-- Футер модального окна -->
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Отменить</button>
              <button type="submit" class="btn btn-primary">Закрыть смену</button>
            </div>
          </form>
        </div>
      </div>
    </div>

1 ответ 1

1

Уберите .container-fluid из окна, оборачивайте .col-**-* в .row:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#hardFinishSessionModal">
  Launch modal
</button>

<div id="hardFinishSessionModal" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- Заголовок модального окна -->
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Введите данные для закрытия смены</h4>
          </div>
          <!-- Основное содержимое модального окна -->
          <form method="POST" class="form-inline" action="{{action('ResultsController@sessionHardFinish')}}">
            <div class="modal-body">
                <input type="hidden" name="_token" value="{{csrf_token()}}">
                <input type="hidden" id="session_id2" name="session_id" value="0">

                    <div class="form-group row">
                        <label for="datetimerange" class="col-md-4 control-label">Время закрытия смены</label>
                           <div class="col-md-6">
                                 <input type="text" name="datetimerange" id="datetimeselector"  class="form-control"  value="01/01/2015 - 01/31/2015" /> 
                           </div>
                    </div>
                    <div class="form-group row">
                        <label for="intotal" class="col-md-4 control-label">Денег в кассе</label>
                          <div class="col-md-6">
                                <input class="form-control" name="intotal" placeholder="Общая сумма в кассе  " value="{{old('intotal')}}">  
                          </div>
                    </div> 
                     <div class="form-group row">
                        <label for="cash_total" class="col-md-4 control-label">Выручка: наличные деньги</label>
                         <div class="col-md-6">
                              <input class="form-control"  name="cash_total" placeholder="Наличные " value="{{old('cash_total')}}">  
                         </div>
                     </div> 
                     <div class="form-group row">
                        <label for="card_total" class="col-md-4 control-label">Выручка: банковские карты</label>
                         <div class="col-md-6">
                             <input class="form-control"  name="card_total" placeholder="Карты" value="{{old('card_total')}}">   
                         </div>
                     </div> 
                     <div class="form-group row">
                        <label for="encashment_total" class="col-md-4 control-label">Инкассация</label>
                         <div class="col-md-6">
                             <input class="form-control" name="encashment_total" placeholder="Инкассировано " value="{{old('encashment_total')}}" >  
                         </div>
                     </div> 
                     <div class="form-group row">
                        <label for="wasted" class="col-md-4 control-label">Уплачено на доставку</label>
                         <div class="col-md-6">
                              <input class="form-control" name="wasted"placeholder="На доставку " value="{{old('wasted')}}">  
                         </div>
                     </div> 
                    <div class="form-group row">
                        <label for="cups100" class="col-md-4 control-label">Стаканы 100</label>
                         <div class="col-md-6">
                             <input class="form-control" name="cups100"placeholder="Стаканы 100" value="{{old('cups100')}}">  
                         </div>
                     </div> 
                    <div class="form-group row">
                        <label for="cups250" class="col-md-4 control-label">Стаканы 250</label>
                         <div class="col-md-6">
                             <input class="form-control" name="cups250"placeholder="Стаканы 250" value="{{old('cups250')}}">  
                         </div>
                     </div> 
                    <div class="form-group row">
                        <label for="cups300" class="col-md-4 control-label">Стаканы 300</label>
                         <div class="col-md-6">
                             <input class="form-control" name="cups300"placeholder="Стаканы 300" value="{{old('cups300')}}">  
                         </div>
                     </div> 
                    <div class="form-group row">
                        <label for="cups400" class="col-md-4 control-label">Стаканы 400</label>
                         <div class="col-md-6">
                             <input class="form-control" name="cups400"placeholder="Стаканы 400" value="{{old('cups400')}}">  
                         </div>
                     </div> 
                    <div class="form-group row">
                        <label for="donuts_remain" class="col-md-4 control-label">Пончиков осталось</label>
                         <div class="col-md-6">
                             <input class="form-control" name="donuts_remain" placeholder="Оставшиеся пончики" value="{{old('donuts_remain')}}">  
                         </div>
                     </div> 
                    <div class="form-group row">
                        <label for="donuts_garbage" class="col-md-4 control-label">Пончиков списано</label>
                         <div class="col-md-6">
                             <input class="form-control" name="donuts_garbage" placeholder="Списанные пончики" value="{{old('donuts_garbage')}}">  
                         </div>
                     </div> 
                </div>
            <!-- Футер модального окна -->
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Отменить</button>
              <button type="submit" class="btn btn-primary">Закрыть смену</button>
            </div>
          </form>
        </div>
      </div>
    </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.