具有多个内容的div的ResponsiveNess

Question

我正在使用Bootstrap 4.我的HTML代码如下所示。

<div class="font-weight-bold col-12">
  <span>Filter :</span>
  <input type="text" class="form-control" />
</div>

在减小浏览器大小之前，我的输出如下所示

减少浏览器大小后，我的输出如下所示

在减小浏览器大小后，如何将两个元素保持在同一行？

Answer 1

试试这样：

<div class="font-weight-bold col-lg-12 col-md-12 col-sm-12"> // use fullwidth for large, medium and small devices
  <span>Filter :</span>
  <input type="text" class="form-control" />
</div>

您可以阅读更多关于bootstrap grid system here的信息。

Answer 2

你可以在这里做一些事情：

1）摆脱"form-control"，添加自己的类，并使用CSS设置其宽度

HTML

<input type="text" class="my-input" />

CSS

.my-input {
  width: 100px; // or the width you desire
}

2）覆盖媒体查询中元素的CSS。

在bootstrap CSS中的某个地方，您在媒体查询中有一个选择器（“form-control”），它为输入提供了更小的宽度。您可以创建自己的媒体查询和选择器并覆盖它。

3）两种组合的排序。您只需在输入中添加一个类即可

<input type="text" class="form-control my-input" />

然后根据屏幕宽度添加CSS。

它可能不是那么优雅 - 但你也可以在宽度上使用!important，然后当屏幕尺寸改变时它不会被覆盖。

喜欢：

.my-input {
  width: 100px !important; //again - not elegant, but will do the work
}

Answer 3

将输入的CSS写为：

input {
  width: calc(100% - 55px)
}

HTML

<div class="font-weight-bold">
  <span>Filter :</span>
  <input type="text" class="form-control" />
</div>

55px是为标签分配的宽度。输入将根据屏幕和标签宽度自行调整，而不使用任何引导程序。