Question

我使用Twitter Bootstrap。这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scafffolding: Fixed</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.span12{
background: black;
color: white;
padding: 20px 0;
text-align: center;
}
.span6{
background: blue;
color: white;
padding: 20px 0;
text-align: center;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span12">Span12</div>        
    </div>
    <div class="row">
        <div class="span6">Span6</div>
        <div class="span6">Span6</div>
    </div>          
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

预计输出由第一行组成，后面是第二行中的两列。但输出包含3行。为什么呢？

Answer 1

看起来你正在使用Bootstrap 2，它使用传统的盒子模型。通过在跨度中添加填充，您可以有效地扩展它们，因此它们不再适合单行并换行。

相反，在您的span*元素中添加一个子div并在其上添加边距。

Bootstrap 3通过全面应用box-sizing: border-box缓解了部分问题，其中包括宽度计算中的填充。

Answer 2

看起来你正在使用Bootstrap 2 spans，但是你说你正在使用Bootstrap 3.1。

而不是做

<div class="row">
    <div class="span6">Span6</div>
    <div class="span6">Span6</div>
</div>

这是创建列的Bootstrap 2方法，你应该做这样的事情：

<div class="row">
    <div class="col-sm-6">Span6</div>
    <div class="col-sm-6">Span6</div>
</div>

类名被更改，因为Bootstrap 3使用移动优先接近，而不是Bootstrap 2.我在这里展示的代码会将div浮动为2列，然后当您在移动屏幕上查看时，他们会崩溃到一列。如果您希望它们保持在2列，无论屏幕大小如何，您都可以将col-sm-6更改为col-xs-6。

以下是Bootstrap 3脚手架系统的文档：http://getbootstrap.com/css/#grid-example-basic

Spanx类不起作用

2 个答案: