Question

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

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

＆＃13;

<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>

＆＃13;

d-flex做我想要的。它将搜索字段和按钮并排放置。我遇到的问题是它在div和下一个div之间留下了大约4列的空白区域。换句话说，它并没有延伸我指定的完整7列。如何在不将按钮推到下一行的情况下解决该问题？

Answer 1

嗯，你的col-7（包含输入和按钮）的宽度正确，问题是你的输入和按钮没有覆盖其父级的整个宽度（col-7）。

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

您也可以使用CSS直接设置样式（以％表示自定义宽度）或使用其他引导类（col-9 col-3等）

或您可以添加

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

这样，输入将占用col-7父

内的所有剩余空间

请参阅下面的代码段中的示例（使用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等）

为什么bootstraps d-flex类阻止我的div伸展100％宽度？

1 个答案: