Question

我正在使用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;
}

Answer 1

您必须为每个屏幕大小使用相应的网格列类。例如，如Boostrap文档中所述，使用.col-xs- *和.col-sm- *表示额外的小屏幕和小屏幕：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>

Answer 2

您需要使用col-xs-代替col-md-。您的列将变得超级瘦，因为300px视口/父元素宽度的单个列（宽度12.5％）为37.5px（内容空间不大）。根据您的需要，可能需要为.row添加最小宽度。

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

使用较小的网格类（如-xs-）会降低元素在其上设置宽度的屏幕范围的阈值。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: