为什么引导 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父级内的所有剩余空间

参见下面 sn-p 中的示例（使用 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 col-1。因此，如果您希望两个并排的元素覆盖父元素的整个宽度，它们的“列数”必须加起来为 12。（ col-8 和 col-4 ，col-6 col-6，col-9 col-3等）