【问题标题】:Horizontal scrollable div's in a bootstrap row引导行中的水平可滚动 div
【发布时间】:2016-12-18 11:25:54
【问题描述】:

我正在尝试制作一个水平可滚动的引导行。该行包含包装在 div 中的客户评论。每个推荐 div 的宽度为33.333%

white-space: nowrapdisplay: inline-block 不起作用。

我做错了什么?

<div class="row">
    <div class="col-lg-12 text-center">
        <div class="section-title">
           <div class="testimonial_group">
               <div class="testimonial">...</div>
               <div class="testimonial">...</div>
               <div class="testimonial">...</div>
               <div class="testimonial">...</div>
               ...
           </div>
        </div>
    </div>
</div>

【问题讨论】:

  • 请与 jsfiddle 分享您的代码

标签: html css list twitter-bootstrap-3 scrollable


【解决方案1】:

你可以使用:

class="text-nowrap overflow-auto"

考虑这个例子:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="list-group list-group-horizontal text-nowrap overflow-auto">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

要在没有任何 css 或所有不需要的 div 的情况下完成所需的结果:getbootstrap.com/list-group

【讨论】:

    【解决方案2】:

    请检查。是你想要达到的吗?

    CodePen  • JSFiddle

    /* The heart of the matter */
    .testimonial-group > .row {
      overflow-x: auto;
      white-space: nowrap;
    }
    .testimonial-group > .row > .col-xs-4 {
      display: inline-block;
      float: none;
    }
    
    /* Decorations */
    .col-xs-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }
    .col-xs-4:nth-child(3n+1) { background: #c69; }
    .col-xs-4:nth-child(3n+2) { background: #9c6; }
    .col-xs-4:nth-child(3n+3) { background: #69c; }
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <div class="container testimonial-group">
      <div class="row text-center">
        <div class="col-xs-4">1</div><!--
     --><div class="col-xs-4">2</div><!--
     --><div class="col-xs-4">3</div><!--
     --><div class="col-xs-4">4</div><!--
     --><div class="col-xs-4">5</div><!--
     --><div class="col-xs-4">6</div><!--
     --><div class="col-xs-4">7</div><!--
     --><div class="col-xs-4">8</div><!--
     --><div class="col-xs-4">9</div>
      </div>
    </div>

    对于引导程序 4

    感谢Hectorcomment

    https://codepen.io/glebkema/pen/xxOgaMm

    /* The heart of the matter */
    .testimonial-group > .row {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
    .testimonial-group > .row > .col-4 {
      display: inline-block;
    }
    
    /* Decorations */
    .col-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }
    .col-4:nth-child(3n+1) { background: #c69; }
    .col-4:nth-child(3n+2) { background: #9c6; }
    .col-4:nth-child(3n+3) { background: #69c; }
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    
    <div class="container testimonial-group">
      <div class="row text-center">
        <div class="col-4">1</div><!--
     --><div class="col-4">2</div><!--
     --><div class="col-4">3</div><!--
     --><div class="col-4">4</div><!--
     --><div class="col-4">5</div><!--
     --><div class="col-4">6</div><!--
     --><div class="col-4">7</div><!--
     --><div class="col-4">8</div><!--
     --><div class="col-4">9</div>
      </div>
    </div>

    【讨论】:

    • ..太棒了!它现在可以工作,但我无法使用触控板或鼠标滚动列表。我只能用键盘滚动它。有什么解决办法吗?...
    • @Codehan25 我猜该行在第一次单击该行后变为可滚动的。
    • 你的代码很好,但在我的情况下它不起作用,嗯
    • @Codehan25 1) 我成功地在笔记本电脑和 iPhone 上滚动。我增加了柱子的高度,现在更容易进入它们。有必要单击该行以使其响应滚动。 2)我添加了 cmets 来删除列之间的空格。这是因为它们现在是内联块。
    • 如果您使用的是Bootstrap 4,您需要将display: block;添加到.testimonial-group &gt; .row
    【解决方案3】:

    我不明白为什么所有这些 no-wrap 和 flex 属性实际上只适用于没有文本的子元素。如果子元素中有文本,则

    white-space: nowrap;
    

    属性使整个文本在一行中展开,结果文本与其他所有内容重叠并破坏了整个布局。

    解决方案要简单得多。简单地说,给父元素以下内容

    display: flex;
    overflow-x: auto;
    

    然后到子元素下面

    min-width: 25%;
    

    注意:3 号栏为 25%,4 号栏为 33.33333%,6 号栏为 50%,依此类推。 你有它。基于引导列的水平可滚动 div 用于布局。

    这是一个干净的示例。 Fiddle

    【讨论】:

      【解决方案4】:

      弹性盒方法

      /* The heart of the matter */
      .testimonial-group > .row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
      }
      .testimonial-group > .row > .col-xs-4 {
        flex: 0 0 auto;
      }
      
      /* Decorations */
      .col-xs-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }
      .col-xs-4:nth-child(3n+1) { background: #c69; }
      .col-xs-4:nth-child(3n+2) { background: #9c6; }
      .col-xs-4:nth-child(3n+3) { background: #69c; }
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      
      <div class="container testimonial-group">
        <div class="row text-center">
          <div class="col-xs-4">1</div><!--
       --><div class="col-xs-4">2</div><!--
       --><div class="col-xs-4">3</div><!--
       --><div class="col-xs-4">4</div><!--
       --><div class="col-xs-4">5</div><!--
       --><div class="col-xs-4">6</div><!--
       --><div class="col-xs-4">7</div><!--
       --><div class="col-xs-4">8</div><!--
       --><div class="col-xs-4">9</div>
        </div>
      </div>

      【讨论】:

        【解决方案5】:

        在 Bootstrap 4 中,您需要添加

        flex-wrap: nowrap;
        

        .testimonial-group > .row
        

        除了Gleb的回答

        【讨论】:

        • 我只需要在此添加overflow-x: auto,Gleb 的其余答案无关紧要。
        【解决方案6】:

        将这些行放在你的 CSS 文件中

        .section-title {
          overflow: scroll;
          overflow-x: scroll;
          overflow-y:hidden
        }
        

        x 表示水平,y 表示垂直,在嵌套了许多 div 的父 div 中应用类代码。

        【讨论】:

          【解决方案7】:

          试试这个:

          section-title {
            width: 100%; 
            overflow-x: scroll(or auto);
          } 
          

          the spec here

          【讨论】:

          • 正是我需要的:overflow-x: auto
          猜你喜欢
          • 2017-06-17
          • 2016-12-08
          • 2014-12-04
          • 2016-06-26
          • 1970-01-01
          • 2019-04-27
          • 2013-07-09
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多