Question

我有一张桌子。我想在表格标题上方添加一行。我在行中添加了8个div。我有以下代码。

<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个div之间有边距，最后3个div也有边距。但是中间的2个div没有边距，它们是重叠的。此外，当我尝试减小“搜索”和“日历” div的大小时，它们分成图标和字段，并占用下面一行的空间。谁能告诉我这里出了什么问题？我只需要一行中的div之间有适当的空间。

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>

希望有帮助！

在引导程序3中，多个div重叠且它们之间没有空白

1 个答案: