有没有办法在较大的屏幕上有自动宽度？

Question

我正在使用bootstrap 3我想在元素上使用col-xs-12但是在所有其他显示器上我希望元素和任何后续元素在任何更大的显示器上使用自动宽度。 我认为答案是媒体查询，但我在这个问题上找不到任何答案。 也许就像col-sm-auto

编辑：我希望我能正确解释这一点。

假设您在页面上有输入和几个标签

现在在xs视图中我希望标签下降到一个新行，为此我可以将输入设置为col-xs-12，但这不会在大型显示器上提供所需的结果

你能看到第一张图片中输入的宽度是如何自动的

Answer 1

您可以尝试添加类似

的内容

@media (min-width: @screen-sm-min){
  .col-sm-auto {
    display: inline-block;
    width: auto;
  }
}

然后将此类添加到您的元素。

或者第二种方法是为不同类型的屏幕设置两个不同的占位符。

例如：

<div class="col-xs-12 visible-xs-block">Some content for extra small screens</div>
<span class="hidden-xs">Some content for small, medium and large screens</div>