如何通过缩小特定宽度尺寸的元素来更好地调节 BootStrap 的宽度样式？

Posted 2023-03-06

【中文标题】如何通过缩小特定宽度尺寸的元素来更好地调节 BootStrap 的宽度样式？

【英文标题】：How can I better regulate BootStrap's width styling from scaling down elements at specific width sizes?

【发布时间】：2014-08-23 08:10:12

【问题描述】：

对于 BootStrap，我遇到的最大问题是使用宽度值的概念。 BootStrap 在任何元素上都有 col-sm-3（值从 3 到 12，值 sm、md、lg），最显着地用于跨度和 divs 元素。 BootStrap 还具有一组预定义的@media-queries，根据宽度大小在移动设备上提供响应式外观。

我注意到，有时当我在div、span 或任何与网格系统相关的元素上使用固定宽度值时，由于被覆盖的宽度，它不会按比例缩小。有时当我指定宽度值时，它会随着浏览器窗口大小的调整而缩小。

现在，我想知道和理解，如何充分利用和控制浏览器不同宽度大小的宽度值，以便我可以选择要调整大小/缩放的元素或保持不变直到剩余空间已被占用？

这是我的意思的图像示例：

浏览器窗口：884 x 992（像素值）

正如您在上面看到的，浏览器窗口大小为 884 像素 x 992 像素，并且元素完美对齐。现在，当我在 770px - 985px 的宽度之间稍微调整它的大小（小于 992px）时，它看起来像下图，当给定剩余空间量时，label 标签不应附加，input 文本字段不应缩小（如下图所示）。如果有人有一个介于这些宽度尺寸之间的设备，它看起来就不对了。所以，我想占据，而不是追加，那个没有被填满的空间。

浏览器窗口：884 x 985（像素值）

注意：我什至不确定要使用哪个，因为很多东西都在使用宽度值，我想知道在 Bootstrap 中处理宽度的正确、有效的方法，无论是媒体查询，col-xx-x，一些特定的元素 css 编辑或其他东西。我想一劳永逸地理解！

这是要演示的引导程序：http://www.bootply.com/jXPUMYCxaU 将浏览器窗口大小调整到平板电脑的大小，您会明白我的意思。我只是希望它看起来正确，因为其他调整大小的宽度都可以且一致！

【问题讨论】：

你能快速制作一张你想要的样子吗？例如。只需在您想要所有东西的地方画一些红色框。您是否希望平板电脑的表单看起来与桌面完全相同？

我希望它看起来像第一个图像（尺寸 > 992），现在当它

【参考方案1】：

我将尝试解释 Bootstrap 网格结构，我认为这将有助于您理解问题。

.col-xx-yy

col = 列选择器

xx (xs, sm, md, lg) = 列宽适用的屏幕宽度，xs More info

yy (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12) = 12/yy 是列的宽度百分比。例如，12 是 12/12 = 宽度：100%，6 是 6/12 = 宽度：50%，3 是 3/12 = 宽度：25%；

因此，在您的示例中，您使用了 col-sm-3，这意味着在任何屏幕宽度 ≥ 768px 上，它的宽度均为 25%。 （屏幕宽度

所以一些可能的解决方案：

在表单中添加一个新的列类，例如将其更改为“col-sm-6 col-md-3”，这意味着它将是宽度：屏幕上的 50% 宽度≥ 768px 和宽度：屏幕上的 25%宽度 ≥ 992 像素。 使用自定义 css 设置宽度，使其不基于百分比（不推荐）

希望这是有道理的，如果您有任何问题，请告诉我。

【讨论】：

您很好地解释了.col 类的用法，经过实验，我完全掌握了这个概念，这正是我想要的。我也不知道我可以将类链接在一起，这在这种情况下也很有用。太感谢了。引导程序的 1UP 知识。 :)

【参考方案2】：

本质上，我建议尝试坚持使用 col-* 结构并摆弄它们以获得正确的结果。一旦掌握了这一点，如果您需要针对不同浏览器窗口大小的特定/不同宽度的特定结构，则需要使用自己的 @media 查询......但无论如何，只需放置一个 html 示例您可以做些什么来控制表单布局以防止屏幕截图中显示的问题，您可以这样做：

<form class='form-horizontal'>
  <div class='form-group'>
    <label class='control-label col-xs-12 col-sm-6, col-md-4'>Label Text</label>
    <div class='col-xs-12 col-sm-6 col-md-8'>
        <input class='form-control' />
    </div>
  </div>
</form>

在移动设备上，标签将堆叠在输入之上，因此它们具有全宽 在平板电脑上，标签将占据整整一半的网格以获得额外空间 在普通屏幕和大屏幕上，标签只会占用 1/3 的空间

【讨论】：

感谢您以如此有见地的方式回答。我不知道您可以将类链接在一起以定义不同的宽度大小。此外，您回答了我要问的第二个问题，关于通过@media queries 使用特定宽度大小的特定 css 样式。再次感谢！ :)