我有一个 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 列。我怎样才能解决这个问题，而不把我的按钮推到下一行？
请您参考如下方法:
好吧，您的 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 等)
