Bootstrap 3水平可滚动行网站设计 [英] Bootstrap 3 Horizontal scrollable row Website Design

问题描述

我想使用引导程序3制作水平滚动网页。这是我的已经尝试了到目前为止。

  @media（min-width：768px）{
 .container {
 width：100％; 
} 
＃main-content {
 min-height：100％; 
 height：auto; 
 
} 
＃main-content> .row {
 overflow-x：scroll; 
 overflow-y：hidden; 
} 
＃main-content> .row [class * =col-lg]，＃main-content> .row [class * =col-md]，＃main-content> .row [class * =col-sm] {
 float：left; 
} 
  

我尝试使用这是线程，但即使已将宽度设置为<$，也不会滚动c $ c> row 类，显示 col-lg / 7kCTD / 3 / show />这里。

我还试图通过获取 col-height的高度来设置 row lg - height，但仍然无法成功。

$我想要实现的是：

1. col-lg- ，col-md-和col-sm-类应该需要滚动它各自的宽度内容。


2. 在col-xs中，默认行为没有任何变化。

http://jsfiddle.net/ravimallya/7kCTD/ 3 / 这是工作地点。任何人都可以建议解决方法？ css，jquery

解决方案

最后，我能够通过一个只有CSS的方法获得我想要的。 b
$ b

  @media（min-width：768px）{
 .container {
 width：100％; 
} 
＃main-content {
 min-height：100％; 
 height：auto; 
} 
＃main-content> .row {
 overflow-x：scroll; 
 overflow-y：hidden; 
 white-space：nowrap; 
} 
＃main-content> .row [class * =col-lg]，＃main-content> .row [class * =col-md]，＃main-content> .row [class * =col-sm] {
 float：none; 
 display：inline-block; 
 white-space：normal; 
 vertical-align：top; 
} 
} 
  

添加 float：none 和 display：inline-block 到 col - p>

您可以在此处查看工作示例。我添加了 niceScroll（）以获得完美的外观。编辑此处。

I am trying to make a horizontal scroll web page using bootstrap 3. This is what I have tried so far.

@media (min-width:768px) {
.container {
width:100%;
}
#main-content{
     min-height: 100%;
    height: auto; 

}
#main-content > .row {
 overflow-x:scroll;
     overflow-y:hidden;
}    
#main-content > .row [class*="col-lg"], #main-content > .row [class*="col-md"], #main-content > .row [class*="col-sm"] {
    float:left;
}

I tried with the jquery method which mentioned in this thread but it is not scrolling even after the width has been set to row class, the col-lg classes as displayed here.

I also tried to set height to row class by getting the height of col-lg- height, but still not succeeded.

What I wanted to achieve is:

1. col-lg-, col-md- and col-sm- classes should need to be scrolled with it's respective width content. the number of cols may vary according to the data.
2. In col-xs, there is no change in the default behavior.

http://jsfiddle.net/ravimallya/7kCTD/3/ this is the work place. Can anyone suggest a workaround? css, jquery

解决方案

Finally, I was able to get what I wanted through a CSS-only method.

@media (min-width:768px) {
  .container{
    width:100%;
  }
  #main-content{
    min-height: 100%;
    height: auto;
  }
  #main-content > .row {
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
  }
  #main-content > .row [class*="col-lg"], #main-content > .row [class*="col-md"], #main-content > .row [class*="col-sm"] {
    float:none;
    display:inline-block;
    white-space:normal;
    vertical-align:top;
  }
}

Added float:none and display:inline-block to col- classes to get it to work.

You can see the working example here. I added niceScroll() to get the perfect look. Edit is here.

这篇关于Bootstrap 3水平可滚动行网站设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！