具有多个内容的 div 的响应性答案

【问题标题】：ResposiveNess of div with multiple content具有多个内容的 div 的响应性
【发布时间】：2018-11-18 18:27:27
【问题描述】：

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

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

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

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

缩小浏览器尺寸后，如何让两个元素保持在同一行？

【问题讨论】：

你能发布你的css吗
感谢@NickParsons。我正在使用 Bootstrap 4。

标签： html css bootstrap-4 responsive

【解决方案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 的更多信息。

【讨论】：

【解决方案2】：

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

1) 去掉"form-control"，添加一个你自己的类并使用CSS设置它的宽度

HTML

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

CSS

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

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

在引导 CSS 的某个地方，您在媒体查询中有一个选择器（“表单控制”），它使输入的宽度更小。您可以创建自己的媒体查询和选择器并覆盖它。

3) 两者兼而有之。您可以在输入中添加一个类

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

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

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

喜欢：

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

【讨论】：

【解决方案3】：

将输入的 CSS 写为：

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

HTML

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

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

【讨论】：