The indentations are uneven, apparently I have a poor understanding of the boostrap markup, please help

<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 answer 1

    Remove the .container-fluid from the window, wrap .col-**-* in .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>