如何在浏览器调整大小时不换行答案

【问题标题】：How to not wrap row on browser resize如何在浏览器调整大小时不换行
【发布时间】：2017-11-07 19:45:31
【问题描述】：

我正在使用 Bootstrap 来构建这样的页面。每行具有相同的结构。

<div class="outerDiv">
    <div class="row">
        <div class="col-md-6">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
    </div>
</div>

这工作正常，看起来像这样。

<------col-md-6------><-col-md-1-><-col-md-1-><-col-md-1-><-col-md-1-><-col-md-1->
<------col-md-6------><-col-md-1-><-col-md-1-><-col-md-1-><-col-md-1-><-col-md-1->

但是当浏览器水平调整大小时（变窄）。页面变成如下：

<------col-md-6------>
<-col-md-1->
<-col-md-1->
<-col-md-1->
<-col-md-1->
<-col-md-1->
<------col-md-6------>
<-col-md-1->
<-col-md-1->
<-col-md-1->
<-col-md-1->
<-col-md-1->

那么我怎样才能让它不堆叠呢？并且必须滚动？

我已尝试应用以下 css 但不起作用。

.row {
    white-space: nowrap;
    min-width: 1250px;
    overflow: auto;
}

【问题讨论】：

明确地说，您是否希望手机自动换行，但调整大小的浏览器窗口不换行？
您的“md”规则适用于中等尺寸和更大的屏幕。默认情况下，字段是堆叠的。
@Goose 无论浏览器窗口大小，我都不希望行换行
@PM77-1 很好，那么我该如何解决这个问题
如果你想在相当小的屏幕尺寸上强制你的网格，那么使用“sm”类。

标签： html css twitter-bootstrap user-interface twitter-bootstrap-3

【解决方案1】：

您必须为每种屏幕尺寸使用相应的网格列类。例如，将 .col-xs-* 和 .col-sm-* 用于超小屏幕和小屏幕，如 Boostrap 文档中所述：http://getbootstrap.com/css/#grid-options

<div class="row">
    <div class="col-md-6 col-sm-6 col-xs-6">
        ...
    </div>
    <div class="col-md-1 col-sm-1 col-xs-1">
        ...
    </div>
    <div class="col-md-1 col-sm-1 col-xs-1">
        ...
    </div>
    <div class="col-md-1 col-sm-1 col-xs-1">
        ...
    </div>
    <div class="col-md-1 col-sm-1 col-xs-1">
        ...
    </div>
    <div class="col-md-1 col-sm-1 col-xs-1">
        ...
    </div>
</div>

【讨论】：

这使得页面调整大小时元素堆叠在一起
我的错，我将示例中的 sm/xs 设置为 6，而您需要 1；我已经更新了我的答案以反映您的需求。重要的是要了解您需要使用 sm 和 xs 列来定位此类屏幕尺寸。

【解决方案2】：

您需要使用col-xs- 而不是col-md-。当300px 视口/父元素宽度为37.5px 的单列（宽度为 12.5%）时，您的列将变得非常窄（内容空间不大）。根据您的需要，可能需要为 .row 添加最小宽度。

当使用中等网格类时，.col-md-6 之类的类设置为width: 50%;，视口大小为 992 像素及以上。在此之下，元素（通常是 DIV）不再具有应用的宽度，并恢复为占据父元素整个宽度的块级元素。因此你的元素的包装。

使用像-xs- 这样的较小的网格类可以降低元素在屏幕上设置宽度的阈值。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

<div class="row">
  <div class="col-xs-6">col-xs-6</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
</div>

<div class="row">
  <div class="col-xs-6">col-xs-6</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
</div>

如果没有足够的空间可用于列中的内容，则使用水平滚动条的示例。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.fixed-container {
  overflow-x: scroll;
}

.fixed-container .row {
  min-width: 1250px;
}

<div class="container">
  <div class="fixed-container">

    <div class="row">
      <div class="col-xs-6">col-xs-6</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
    </div>

    <div class="row">
      <div class="col-xs-6">col-xs-6</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
    </div>

  </div>
</div>

【讨论】：