html 使用Bootstrap 样式,设置div块中多大,多出部分自动分页,怎么设置

我一个大的div 里面很好多小的div, div里面是后台传过来的数据,是自动生成的div,现在当我数据多的时候,数据div 会自动往下溢出,而不能自动分页,应该怎么做?

    设置百分之百样式  class 添加 col-lg-12

    div的宽度是使用百分比来定的 上限为12

    lg为大屏设备(min-width:1200px) md为平板 ms为  中屏设备(min-width:992px),sm为小屏设备(min-width:768px),xs为超小型设备(max-width:768px)

    设置12分之一 使用 col-lg-1

温馨提示:内容为网友见解,仅供参考
第1个回答  2016-08-16
<body>
<header style="background:#f90;color:#fff;">header</header>
<div id="out" class="container" style="background:#f00;width:100%;color:#fff;">
<div id="in" class="row" style="background:#600;width:80%; margin:0 auto;height:500px;color:#fff;">id="in"</div>
</div>
<footer style="background:#f90;color:#fff;">footer</footer>
</body>本回答被提问者和网友采纳

bootstrap分页怎么实现
一、引入Bootstrap的CSS和JS文件 在页面中正确引入Bootstrap的CSS和JS文件,这是使用Bootstrap组件的基础。可以通过链接到Bootstrap的CDN文件,或者直接下载文件并引入。二、创建Pagination组件 在HTML中创建一个div,为其添加class "pagination"。这个div就是分页组件的容器。例如:html 三、使用Pagination组件...

如何使用Bootstrap实现分页及翻页?Bootstrap实现分页的类有哪些_百度知...
<\/body> <\/html> 结果如下所示:分页的大小 下面的实例演示了上表中所讨论的 class .pagination-* 的用法:<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 分页的大小<\/title> <link href="\/bootstrap\/css\/bootstrap.min.css" rel="stylesheet"> <script src="\/scripts\/jquery.mi...

如何使用Bootstrap实现分页及翻页
首先便是要下载Bootstrap Paginator了,github上便有这个的开源项目提供下载:https:\/\/github.com\/lyonlai\/bootstrap-paginator 首先视图的上面应该需要引入js和css文件,主要有三个文件,分别是bootstrap的css,jquery以及Paginator的js文件。其中网上搜到,貌似jquery必须要1.8版本以上,这个我没有亲自去测试...

html.bootstrappagelinks分页太多怎么办
在使用 jQuery+bootstrap 做分页处理,是可以参数设置显示多少页的。('#page').bs_pagination({ totalPages:5,\/\/总页数:由接口返回(AJAX) currentPage:1,\/\/当前页:由前端指定 visiblePageLinks:5,\/\/显示的最多分页链接数 showGoToPage:false, showRowsPerPage: false, showRo...

bootstrap模态框的分页怎么通过datatables来实现
"bootstrap": { "fnInit": function( oSettings, nPaging, fnDraw ) { var oLang = oSettings.oLanguage.oPaginate;var fnClickHandler = function ( e ) { e.preventDefault();if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) { fnDraw( oSettings );} };(nPaging)....

bootstrap快速搭建页面(bootstrap搭建网页框架)
怎么使用web前端框架bootstrap1.Bootstrap是基于HTML5和CSS3开发的前端框架,它简洁灵活,使得Web开发更加快捷 兼容大部分jQuery插件 2.Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速搭建一个漂亮、功能完备的网站。3.其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、...

bootstrap前端框架用法(bootstrap后端ui框架)
2、设置代码当使用Bootstrap(或任何Web支持文件集)时,您可以从多种方法中选择用来设置HTML和其他代码的方法。我建议您创建一个文件夹来存储自己的项目,然后将Bootstrap文件及其完整的文件夹结构复制到项目文件夹中。3、下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告...

bootstrap table怎样自适应内容中的宽度?
bootstrap table自适应内容宽度的方法如下:使用class“table-responsive”<div class=table-responsive"> <table class="table text-nowrap"> <thead> <tr> <th> ... <\/th> ... <\/tr> <\/thead> <tbody> <tr> <td> ... <\/td> ... <\/tr> ... <\/tbody> <\/table><\/di...

bootstrap table下面的分页信息怎么去掉
我也刚好也遇到这个问题,然后发现一个不用更改库文件的解决方法:设置 1、设置paginationDetailHAlign:' hidden' ,注意hidden前面有个空格 2、在你的全局样式表中添加 .hidden{display:none;}

“bootstrap-select.js ”怎么联动改变?
“bootstrap-select.js ”联动改变方式如下:1、多选效果 可以设置最多只能选几个 2、图文结合的效果 3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据)输入内容前 输入空格搜索出全部 滚动条滑动到底部自动加载剩余项 输入文本动态去后台过滤 更高级的用法如:代码示例如下:1、多选效果 select...

相似回答