Fatal编程技术网

Twitter bootstrap Spanx类不工作

twitter-bootstrap twitter-bootstrap-3

Twitter bootstrap Spanx类不工作,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,我使用推特引导。代码如下： <!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>S

我使用推特引导。代码如下：

<!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>


诈骗：固定
.span12{
背景：黑色；
颜色：白色；
填充：20px0；
文本对齐：居中；
}
.span6{
背景：蓝色；
颜色：白色；
填充：20px0；
文本对齐：居中；
边缘顶部：15px；
}
Span12
Span6
Span6
预期输出由第一行组成，第二行紧跟两列。但输出由3行组成。为什么？

看起来您使用的是Bootstrap 2，它使用的是传统的盒子模型。通过向跨距中添加填充，可以有效地加宽跨距，从而使跨距不再适合于单个行和环绕

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

Bootstrap 3通过全面应用
框大小：边框框
，包括宽度计算中的填充，缓解了其中一些问题。

看起来您使用的是Bootstrap 2跨度，但您说您使用的是Bootstrap 3.1

而不是做

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


Span6
Span6
这是Bootstrap 2创建列的方法，您应该这样做：

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


Span6
Span6
类名已更改，因为Bootstrap 3使用移动设备，而不是Bootstrap 2。我在这里展示的代码将把div浮动在两列中，然后当您在移动屏幕上查看它们时，它们将折叠为一列。如果您想让它们保持在两列中，而不考虑屏幕大小，您可以将col-sm-6更改为col-xs-6

下面是有关Bootstrap 3脚手架系统的文档：

对不起，实际上我使用的是Bootstrap 3.1.1。谢谢。你认为我的网页设计应该使用Bootstrap吗？或者我应该硬编码？这种类型的讨论在这里的评论中不合适，而且我对你的项目也不太了解。非常有用！！对于什么样的网站设计，你推荐使用Bootstrap吗？它适用于所有类型的网站。：）我主要使用它进行快速原型制作，或者如果我知道一个网站需要在预算上做出响应，那么它会让事情变得更快。你认为即使是像www.quora.com这样的fontend也可以用bootstrap创建吗？bootstrap只是一个CSS框架，所以它真的可以在任何可以使用CSS的地方使用。虽然在一个已经很复杂的网站或web应用程序中实现它可能会很棘手，但正如我所说的，它只是一个CSS框架，应该建立在这个框架之上。您当然可以使用引导作为前端样式的起点来构建像Quora这样的站点，但这只是其中的一小部分。这实际上取决于项目的需求。