html - 为什么 Bootstrap d-flex 类会阻止我的 div 拉伸(stretch) 100% 宽度？

Question

我有一个 div，其中我想并排设置两个元素:一个搜索输入字段和相应的搜索提交按钮。

到目前为止，我已尝试使用以下代码完成此操作:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">

<div class="container w-100 mt-4 border-bottom pb-3 h-25 align-content-center" style="box-sizing: border-box;">
		<div class="row">
			<div class="col-1 position-relative d-flex align-items-center"><span class="mh-100" style="line-height: 1rem">Class20</span>
			</div>
			<div class="col-7 mw-100 align-items-center position-relative d-flex">
				<form action="" class="justify-content-center position-relative m-0">
					<input type="search" name="" value="" placeholder="search" class="w-100 align-items-center pl-3" id="search">
				</form>
				<button class="btn-outline-primary"type="submit">Search</button>
			</div> <!--column 7-->
			<div class="col-4">
				<button class="btn-outline-primary"type="submit">Log In</button>
				<button class="btn-outline-primary"type="submit">Sell your stuff</button>
			</div> <!-- col-4 -->
		</div> <!--row-->
</div>

d-flex 可以满足我的要求。它将搜索字段和按钮并排放置。我遇到的问题是它还在那个 div 和下一个 div 之间留下了大约 4 列的空白。换句话说，它不会拉伸(stretch)我指定的全部 7 列。我怎样才能解决这个问题，而不把我的按钮推到下一行？

Answer 1

好吧，您的 col-7(包含输入和按钮)具有正确的宽度，问题是您的输入和按钮没有覆盖其父项的整个宽度(col- 7)。

因此您可以向输入(例如 col-8)和按钮(例如 col-4)添加一些 Bootstrap 类。这样他们将覆盖他们 parent 的整个宽度。

您还可以直接使用 CSS 设置它们的样式(以 % 为单位自定义宽度)或使用其他 Bootstrap 类(col-9 col-3 等)

或者您可以添加

.d-flex form{
  flex-grow: 1
}

这样，输入将占据 col-7 parent

中的所有剩余空间

请参阅下面代码片段中的示例(使用 col-8 和 col-4)或 jsFIddle

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container w-100 mt-4 border-bottom pb-3 h-25 align-content-center" style="box-sizing: border-box;">
  <div class="row">
    <div class="col-1 position-relative d-flex align-items-center"><span class="mh-100" style="line-height: 1rem">Class20</span>
    </div>
    <div class="col-7 mw-100 align-items-center position-relative d-flex">
      <form action="" class="justify-content-center position-relative m-0 col-8">
        <input type="search" name="" value="" placeholder="search" class="w-100 align-items-center pl-3 " id="search">
      </form>
      <button class="btn-outline-primary col-4" type="submit">Search</button>
    </div>
    <!--column 7-->
    <div class="col-4">
      <button class="btn-outline-primary" type="submit">Log In</button>
      <button class="btn-outline-primary" type="submit">Sell your stuff</button>
    </div>
    <!-- col-4 -->
  </div>
  <!--row-->
</div>

Bootstrap 将元素宽度分成 12 列。 100% = 12 列 1。因此，如果您希望两个并排元素覆盖父元素的整个宽度，则它们的“列号”加起来必须为 12。( col-8 和 col-4 、 col-6 col-6 、 col-9 col-3 等)