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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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