bootstrap横向超过显示滚动条
2016-12-08 17:42:50 david___ 阅读数 2405

在写网页的时候,采用了Bootstrap框架,在使用栅格布局的时候,在父标签中添加row类,发现引起网页出现横向滚动条的问题。

查看row类的css样式内容为:

.row{

margin-left:15px;

margin-right:15px;

}
因此确定就是由于这两个样式引起的。

故重写row类的css样式,即

.row{

margin-left:0px;

margin-right:0px;

}

至于为什么Bootstrap要将row类的左右外边距设定为负值,官网解释为,通过为.row元素设置负值margin从而抵消到.Container元素设置的padding,也就间接为“行(row)"所包含的”列(coloum)"抵消掉了padding。而我出现这种问题的原因也是由于没有将行(row)包含在.container(固定宽度)或.container-fluid(100%宽度)中。

因此,另一种解决方法即是将行(row)包含在.container(固定宽度)或.container-fluid(100%宽度)中。


2017-06-28 22:18:27 qq_30682027 阅读数 462

首先,要把table嵌套在.table-responsive节点下,常见就是class为table-responsive的div中套着一个table


然后,table自身要有.table-fix。如果没有的话,在Chrome浏览器中仍然可以显示横向滚动条,但是在IE9中,是无法显示横向滚动条的。

2017-10-21 15:34:02 u013246459 阅读数 2358

一:添加bootstrap样式增加滚动条

其实只要在 相关模块的  class属性中,再加上  pre-scrollable 即可。

例如是在<div >中添加pre-scrollable:

<div class="pre-scrollable">

二:通过设置overflow增加滚动条

<div style=" overflow:scroll; width:400px; height:400px;”></div>

记住宽和高一定要设置噢,否则不成的,不过在不超出时,会有下面的滚动条,所以不是最好的选择.

<div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>

记住宽和高一定要设置噢,否则不成的.这样比较好的是,在宽和高不超出时,只是一条线.

(3)直接为div指定overflow属性为auto即可,但是必须指定div的高度,如下:

<div style="position:absolute; height:400px; overflow:auto"></div>

如果要出现水平滚动条,则: overflow-x:auto
同理,垂直滚动条为: overflow-y:auto
如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative

三:隐藏滚动条

 {overflow: hidden !important;}  或者 {overflow-x: hidden;      overflow-y: hidden;}可分别隐藏x轴或y轴的滚动条

 

 

 

2017-05-03 09:20:58 qq_26495107 阅读数 491
<!--让IE渲染更好的效果-->
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    <!-- 解决IE9以下的浏览器不支持媒体查询 -->
    <!-- [if lf IE 9]>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif] -->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <style>
横向现实列表代码
<style>
ul{
    display:inline;
white-space: nowrap;
padding:0; 
 }
li{
width:80px;
height:80px;
margin:3px;
/*float:left;*/
background:red;
display:inline-block;
}
div{width:400px;border:1px solid red; overflow-x:scroll;  }

</style>

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
2017-07-13 17:33:59 zerocher 阅读数 894

一:添加bootstrap样式增加滚动条


其实只要在 相关模块的  class属性中,再加上  pre-scrollable 即可。

例如是在<div >中添加pre-scrollable:<div class="pre-scrollable">


二:通过设置overflow增加滚动条


(1)<div style=" overflow:scroll; width:400px; height:400px;”></div>


记住宽和高一定要设置噢,否则不成的,不过在不超出时,会有下面的滚动条,所以不是最好的选择.


(2)<div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>


记住宽和高一定要设置噢,否则不成的.这样比较好的是,在宽和高不超出时,只是一条线.\


(3)直接为div指定overflow属性为auto即可,但是必须指定div的高度,如下:


<div style="position:absolute; height:400px; overflow:auto"></div>


如果要出现水平滚动条,则: overflow-x:auto


同理,垂直滚动条为: overflow-y:auto


如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative


三:隐藏滚动条

 {overflow: hidden !important;}  或者 {overflow-x: hidden;      overflow-y: hidden;}可分别隐藏x轴或y轴的滚动条

Bootstrap 滚动条

阅读数 33430

Bootstrap横向表单

阅读数 5761

bootstrap 横向ul

阅读数 82

没有更多推荐了,返回首页