Как удалить пустое пространство из моих столбцов сетки Bootstrap?

Question

У меня есть поисковый фильтр с полями ввода для поискового запроса, двумя датчиками и двумя кнопками:

<div id="search-holder">
    <div id="search-box">
        <div class="form-group row">
            <div class="col-lg-10 col-md-9 col-sm-9 form-group row">
                <div class="col-lg-8 col-md-8 col-sm-6">
                    <input id="searchResident" type="text" class="form-control search-input col-md-10" data-bind="value: mainDataSearchWorker, valueUpdate: 'afterkeydown', enterkey: mainDataRefreshData" placeholder="@SharedResources.Index.SearchNurse" />
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3">
                    <input id="searchIntakeDateFrom" type="text" class="form-control search-date pointer picker" data-bind="datePicker: mainDataSearchDateFrom, maxDate: mainDataSearchDateTo, valueUpdate: 'afterkeydown', enterkey: mainDataRefreshData" placeholder="@SharedResources.Index.SearchDateFrom" />
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3">
                    <input id="searchIntakeDateTo" type="text" class="form-control search-date pointer picker" data-bind="datePicker: mainDataSearchDateTo, minDate: mainDataSearchDateFrom, valueUpdate: 'afterkeydown', enterkey: mainDataRefreshData" placeholder="@SharedResources.Index.SearchDateTo" />
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-3 form-group row">
                <div>
                    <button type="button" id="search" class="btn btn-newline" data-bind="click: function() {mainDataRefreshData()}"> @SharedResources.Index.Search</button>
                    <button class="btn btn-sm leftmargin10" title="@SharedResources.Index.Reset" data-bind="click: function() {mainDataResetSearch()}">
                        <span class="fa fa-repeat"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Однако поле ввода для searchterm "searchResident" не полностью растянуто, и у меня есть свободное пространство между полем ввода и полем datepicker:

Как мне полностью растянуть поле ввода "searchResident", чтобы у меня не было пустого пространства между элементами ввода?

https://www.bootply.com/EAkJ1KHlla

Answer 1

У вас есть 2 проблемы:

1) Вы даете ввод шириной 10 столбцов с col-md-10, таким образом, ваша основная проблема.Укажите целые 12 столбцов.

2) Ни один из столбцов не вложен должным образом, поскольку вы иногда используете столбцы в качестве строк или даже вообще не добавляете новую строку.Как и в документации , вам нужно создать новую строку ниже родительского столбца и поместить только вложенные столбцы внутри новой строки.Пример из документации:

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Answer 2

    <input id="searchResident" type="text" class="form-control search-input 
**col-md-10**" data-bind="value: mainDataSearchWorker, valueUpdate: 
'afterkeydown', enterkey: mainDataRefreshData"placeholder="@SharedResources.Index.SearchNurse">

Ваш вход имеет класс col-md-10 , который устанавливает максимальную ширину 83% своего контейнера.

Измените его на col-md-12 , и это решит вашу проблему.