twitter-bootstrap – Bootstrap:如何在网格设计中的任何位置水
发布时间:2020-12-17 21:33:25 所属栏目:安全 来源:网络整理
导读:我正在学习Bootstrap.我使用Bootstrap进行固定宽度的设计.从在线文档中,我知道从列开始定位元素很容易.例如: !DOCTYPE htmlhtmlhead meta charset="utf-8" titleBootstrap version/title meta name="viewport" content="width=device-width,initial-scale=1
我正在学习Bootstrap.我使用Bootstrap进行固定宽度的设计.从在线文档中,我知道从列开始定位元素很容易.例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap version</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Le styles --> <link href="css/bootstrap.css" rel="stylesheet"> <style type="text/css"> body { padding-top: 60px; padding-bottom: 40px; } </style> <link href="css/bootstrap-responsive.css" rel="stylesheet"> <link href="learn.css" rel="stylesheet"> <!-- Le HTML5 shim,for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <div class="span3" style="background-color:grey">span3</div> <div class="span5" style="background-color:pink"><div id="text">span5 text</div></div> <div class="span4" style="background-color:navy">span4</div> </div> </div> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"></script>')</script> <script src="js/bootstrap.min.js"></script> </body> </html> 在上面, <div id="text">span5 text</div> 水平开始正好在第四列开始的位置.我想知道Bootstrap专家用户如何使用CSS定位 <div id="text">span5 text</div> 使其在第三和第四列之间开始或在第八和第九列之间结束. 我在考虑使用以下两种方法: <style> #text { margin-left:-10px; } </style> 要么 <style> #text { position:relative; left:-10px; } </style> 定位div,但不确定哪个是首选,想知道专家做了什么以及其他一些方法. 谢谢! 解决方法
默认情况下,Bootstrap跨度之间始终有一个margin-left(或gutter)(参见此处:
http://bootply.com/64463).如果你想覆盖它,可以使用CSS,但是你将失去Bootstrap的响应优势,因为该元素将从正常的页面流中删除.
一个更好的选择可能是没有装订线的自定义Bootstrap构建:http://twitter.github.io/bootstrap/customize.html#variables 或者,您可以创建一个自定义CSS类,根据需要应用于行,如此无装饰示例:http://bootply.com/61712 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |