Question

我是Bootstrap初学者。

我想在内容溢出父div的宽度时进行水平滚动。

如果我给父母提供静态宽度值，那么效果很好..

但是当我给出动态宽度（比如col-xs，col-md）时，它不起作用..

[HTML]

    <div class="row">
      <div class="col-md-4 col-xs-4" style="background-color:green">other contents</div>
      <div class="col-md-4 col-xs-4" style="background-color:pink; overflow-x:auto;">
          <h4>scrollable horizontal</h4>
          <div class='content'>something...</div>
          <div class='content'>something...</div>
          <div class='content'>something...</div>
          <div class='content'>something...</div>
          <div class='content'>something...</div>
          <div class='content'>something...</div>      
      </div>
      <div class="col-md-4 col-xs-4"  style="background-color:orange;">ohter contents</div>
    </div>

[CSS]

.content{
   display:inline-block;
   padding: 0px 5px;
}

h4 {
  text-align:center;
}

这是我的JSFiddle https://jsfiddle.net/m9gauc63/1/

在JSFiddle中，我想在粉红色区域制作水平滚动条水平排列。

非常感谢！

Answer 1

我不确定。请尝试

.content{
   display:inline-block;
   padding: 0px 5px;
  overflow-x: scroll;
}

h4 {
  text-align:center;
}

如何在引导网格系统上进行水平滚动？

1 个答案: