为什么引导程序 d-flex 类会阻止我的 div 拉伸 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 列空白。换句话说，它不会拉伸我指定的全部 7 列。我该如何解决这个问题，而不用按下我的按钮到下一行？

Answer 1

好吧，您的col-7（包含 input 和 button ）具有正确的宽度，问题是您的 input 和 button 没有覆盖其父级（ col-7 ）的整个宽度。

因此，您可以向输入（例如col-8）和按钮（例如col-4）添加一些引导程序类。这样他们将覆盖其父级的整个宽度。

您还可以直接使用 CSS 设置样式（以 % 为单位为它们提供自定义宽度）或使用其他引导程序类（ col-9 col-3 等）

或者你可以添加

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

这样，输入将占据col-7父级内部的所有剩余空间

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

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

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