Html 我怎样才能更好地调节BootStrap的宽度样式，使其不受特定宽度大小的元素缩放的影响？

对于引导，我遇到的最大问题是使用宽度值的概念。BootStrap的col-sm-3值介于3到12之间，在任何元素上都有sm、md、lg的值，最常用于span和divs元素。BootStrap还具有一组预定义的@media查询，可根据宽度大小在移动设备上提供响应性外观

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

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

以下是我的意思的图像示例：

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

如上所示，浏览器窗口大小为884px 992px，元素完全对齐。现在，当我在770px-985px的宽度之间将其调整到略小于992px时，它看起来像下图，当给定剩余空间量时，标签标签不应追加，输入文本字段不应缩小，如下图所示。如果有人有一个介于这些宽度大小之间的设备，它看起来就不合适了。所以，我想占据，而不是附加，那个还没有被填满的空间

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

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

---

下面是要演示的引导：将浏览器窗口的大小调整到平板电脑的大小，您就会明白我的意思。一、 只是希望它看起来是正确的，因为其他调整大小的宽度是好的和一致的

我将尝试解释引导网格结构，我认为这将帮助您理解问题

.col xx yy

列选择器

xx xs，sm，md，lg=适用列宽的屏幕宽度，xs<768px，sm≥ 美国马里兰州768px≥ 992px，lg≥1200像素

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%。屏幕宽度<768px，则为100%。所以发生的事情是，外部容器的宽度从970px变为750px，所以列的宽度也变为这个值的25%

因此，一些可能的解决方案：

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

---

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

我将尝试解释引导网格结构，我认为这将帮助您理解问题

.col xx yy

列选择器

xx xs，sm，md，lg=适用列宽的屏幕宽度，xs<768px，sm≥ 美国马里兰州768px≥ 992px，lg≥1200像素

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%。屏幕宽度<768px，则为100%。所以发生的事情是，外部容器的宽度从970px变为750px，所以列的宽度也变为这个值的25%

因此，一些可能的解决方案：

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

---

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

从本质上说，我建议您坚持使用col-*结构，并对其进行修改以获得正确的结果。一旦你掌握了这一点，如果你需要针对不同的浏览器窗口大小使用特定/不同宽度的特定结构，你需要使用你自己的@media查询…但在任何情况下，只要用一个HTML示例来说明你可以做些什么来控制表单布局，以防止屏幕截图中显示的问题，你可以 o这：

在移动设备上，标签将堆叠在输入端的顶部，使其具有全宽 在平板电脑上，标签将占据整个网格的一半，以获得额外的空间 在常规和大屏幕上，标签仅占空间的1/3

---

从本质上说，我建议尝试使用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

---

你能把你想要的样子快速地画出来吗？只要在你想要的地方画一些红色的方框就行了。你想让平板电脑的形式看起来和桌面一模一样吗？我想让它看起来像是第一个图像大小>992，现在当它变为<992时，它看起来像第二个图像，缩放和压缩里面的元素，而考虑到它还剩下的空间量，这是不可能的。当然，我会添加一个快速图像，以便在视觉上更轻松地演示。您能快速生成一个您希望它看起来像什么的图像吗？只要在你想要的地方画一些红色的方框就行了。你想让平板电脑的形式看起来和桌面一模一样吗？我想让它看起来像是第一个图像大小>992，现在当它变为<992时，它看起来像第二个图像，缩放和压缩里面的元素，而考虑到它还剩下的空间量，这是不可能的。当然，我会添加一个快速的图像，以便在视觉上更容易地演示。您很好地解释了.col类的用法，在对其进行实验之后，我完全理解了这个概念，这正是我想要的。我也不知道我可以将类链接在一起，这在本例中也很有用。非常感谢你。1UP引导知识：您很好地解释了.col类的用法，在使用它进行实验之后，我完全掌握了这个概念，这正是我想要的。我也不知道我可以将类链接在一起，这在本例中也很有用。非常感谢你。1UP引导知识：谢谢你以如此有见地的方式回答。我不知道可以将类链接在一起以定义不同的宽度大小。此外，您还回答了我要问的第二个问题，关于通过@media querys为特定宽度大小使用特定css样式。再次感谢！：谢谢你以如此有见地的方式回答。我不知道可以将类链接在一起以定义不同的宽度大小。此外，您还回答了我要问的第二个问题，关于通过@media querys为特定宽度大小使用特定css样式。再次感谢！：