множественные div перекрываются без полей между ними в начальной загрузке 3

Question

У меня есть стол.Я хочу добавить строку чуть выше заголовка таблицы.У меня есть 8 делений, чтобы добавить в строку.У меня есть следующие коды.

<div class = "container">
    <div class="row" style="margin-top: 8px">
        <div class = "col-sm-1">
            <div class="dateselect_filter" id="dt_basic_length">
                <label>
                    <select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
                        <option value="a">a</option>
                        <option value="b">b</option>
                        <option value="c">c</option>
                        <option value="d">d</option>
                        <option value="e">e</option>
                    </select>
                </label>
            </div>
        </div>
        <div class = "col-sm-1">
            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                <label class="btn btn-secondary active">
                    <input type="radio" name="options" id="option1" autocomplete="off" checked>S
                </label>
                <label class="btn btn-secondary">
                    <input type="radio" name="options" id="option2" autocomplete="off">L
                </label>
            </div>
        </div>
        <div class = "col-sm-1">
            <div id="dt_basic_filter" class="dataTables_filter">
                <label>
                    <input type="search" class="form-control" placeholder="Filter a">
                </label>
            </div>
        </div>
        <div class = "col-sm-1">
            <div id="dt_basic_filter" class="dataTables_filter">
                <label>
                    <input type="search" class="form-control" placeholder="Filter b" aria-controls="dt_basic">
                </label>
            </div>
        </div>
        <div class = "col-sm-1">
            <div id="dt_basic_filter" class="dataTables_filter">
                <label>
                    <input type="search" class="form-control" placeholder="Filter c" aria-controls="dt_basic">
                </label>
            </div>
        </div>
        <div class = "col-sm-3">
            <div id="dt_basic_filter" class="dataTables_filter">
                <label>
                    <span class="input-group-addon">
                        <i class="glyphicon glyphicon-search"></i>
                    </span>
                    <input type="search" class="form-control form-control-sm" placeholder="Search" aria-controls="dt_basic">
                </label>
            </div>
        </div>
        <div class = "col-sm-1">
            <div class="dt_basic_filter" id="dt_basic_length">
                <label>
                    <select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
                        <option value="x">x</option>
                        <option value="y">y</option>
                        <option value="z">z</option>
                        <option value="xx">xx</option>
                    </select>
                </label>
            </div>
        </div>
        <div class = "col-sm-3">
            <div id="dt_basic_filter" class="dataTables_filter">
                <label>
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                    <input type="search" class="form-control form-control-sm" placeholder="calendar" aria-controls="dt_basic">
                </label>
            </div>
        </div>

    </div>
</div>

Моя проблема в том, что первые 3 деления здесь имеют поле между ними, а последние 3 деления также имеют поля.Но 2 деления в середине не имеют поля и они перекрываются.Более того, когда я пытаюсь уменьшить размер div «search» и «calender», они разбиваются на иконки и поля и занимают место в строке ниже.Может кто-нибудь сказать мне, что здесь пошло не так?Мне просто нужно умеренное пространство между элементами в одном ряду.

Answer 1

Интересно, если вы хотите добавить заголовок, это то, что вы имеете в виду?(Я работал с Bootstrap 4).Возможно, вы могли бы загрузить изображение того, что вы ищете, чтобы оно было понятнее :)

.search-custom {
  width: 80%;
}

.calendar-custom {
  width: 50%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 text-center" style="border:1px solid;">Header</div>
    </row>
    <div class="row" style="margin-top: 8px">
      <div class="col-sm-1">
        <div class="dateselect_filter" id="dt_basic_length">
          <label>
                    <select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
                        <option value="a">a</option>
                        <option value="b">b</option>
                        <option value="c">c</option>
                        <option value="d">d</option>
                        <option value="e">e</option>
                    </select>
                </label>
        </div>
      </div>
      <div class="col-sm-1">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-secondary active">
                    <input type="radio" name="options" id="option1" autocomplete="off" checked>S
                </label>
          <label class="btn btn-secondary">
                    <input type="radio" name="options" id="option2" autocomplete="off">L
                </label>
        </div>
      </div>
      <div class="col-sm-1">
        <div id="dt_basic_filter" class="dataTables_filter">
          <label>
                    <input type="search" class="form-control" placeholder="Filter a">
                </label>
        </div>
      </div>
      <div class="col-sm-1">
        <div id="dt_basic_filter" class="dataTables_filter">
          <label>
                    <input type="search" class="form-control" placeholder="Filter b" aria-controls="dt_basic">
                </label>
        </div>
      </div>
      <div class="col-sm-1">
        <div id="dt_basic_filter" class="dataTables_filter">
          <label>
                    <input type="search" class="form-control" placeholder="Filter c" aria-controls="dt_basic">
                </label>
        </div>
      </div>
      <div class="col-sm-3">
        <div id="dt_basic_filter" class="dataTables_filter">
          <label>
                    <span class="input-group-addon">
                        <i class="glyphicon glyphicon-search"></i>
                    </span>
                    <input type="search" class="form-control form-control-sm search-custom" placeholder="Search" aria-controls="dt_basic">
                </label>
        </div>
      </div>
      <div class="col-sm-1">
        <div class="dt_basic_filter" id="dt_basic_length">
          <label>
                    <select name="dt_basic_length" aria-controls="dt_basic" class="form-control input-sm">
                        <option value="x">x</option>
                        <option value="y">y</option>
                        <option value="z">z</option>
                        <option value="xx">xx</option>
                    </select>
                </label>
        </div>
      </div>
      <div class="col-sm-3">
        <div id="dt_basic_filter" class="dataTables_filter">
          <label>
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                    <input type="search" class="form-control form-control-sm calendar-custom" placeholder="calendar" aria-controls="dt_basic">
                </label>
        </div>
      </div>

    </div>
  </div>

Надеюсь, это поможет!