在Bootstrap中为span div添加边框会混淆布局
Ano*_*sta 14 layout twitter-bootstrap
我从Twitter Bootstrap开始,并对如何在其中进行布局功能提出疑问.这是HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Test</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row">
<div class="span12">c</div>
</div>
</div>
</body>
</html>
style.css中:
div.container
{
background-color:#aaa;
}
div.span4, div.span8, div.span12
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
为span4和span8添加边框会增加它们的宽度,我最终会这样:
span4和span8堆叠在一起,而它们应该在同一条线上.我意识到我可以在我的.css文件中减少它们的宽度并更正它,或者使用它:
http://paulirish.com/2012/box-sizing-border-box-ftw/
但Bootstrap是否提供了纠正此问题的方法(每次添加或删除边框时都不添加额外的CSS等)
jos*_*shb 33
bootstrap中的span类具有特定的宽度,因此添加边框会抛出该行的总数并强制它们换行.为了解决这个问题,我通常将边框样式放在带有span类的div内的div上.像这样的东西:
HTML
<div class="row">
<div class="span4">
<div>a</div>
</div>
<div class="span8">
<div>b</div>
</div>
</div>
CSS
.span4 > div, .span8 > div
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
- 如果你想在`row`中添加一个边框,然后在其中嵌入`span`s,该怎么办？ (3认同)
- 一般情况下,我会尽量避免将自己的样式添加到引导程序中的网格类,以避免与网格系统冲突. (2认同)
我有完全相同的问题,玩盒子大小没有任何帮助.对我来说唯一有用的解决方案是使用row-fluid.
与流体流体的区别在于它们基于百分比而非固定像素.然后,连续的子跨度总是加起来为12,而不是在正常的像素宽度行中添加到父跨度宽度.
所以例如你的
<div class="container">
<div class="row-fluid">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row-fluid">
<div class="span12">c</div>
</div>
</div>
现在,您不会因更改边距,填充或边框而遇到任何问题.
| 归档时间： |
|
| 查看次数： |
43783 次 |
| 最近记录： |