gpt4 book ai didi

javascript - Bootstrap 跨度不起作用

转载 作者:行者123 更新时间:2023-11-29 16:13:10 26 4
gpt4 key购买 nike

我正在尝试使用 Bootstrap,我有以下 html,Chrome 控制台上没有错误,但 Bootstrap 跨度不起作用。我错过了什么吗?

<!DOCTYPE html>
<html ng-app="myApp">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style type="text/css" src="css/bootstrap.min.css"></style>
<style type="text/css" src="css/app.css"></style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
<h2>Column one</h2>
<p>
Something
</p>
</div>
<div class="span4">
<h2>Column one</h2>
<p>
Something else
</p>
</div>
<div class="span4">
<h2>Column one</h2>
<p>
Something different
</p>
</div>
</div>
</div>

</body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/Controllers/EventController.js"></script>
</html>

最佳答案

您说过您使用的是 v3.1.1。问题是 v3 不再使用 spanX,它使用 col-md-X/col-sm-X/ col-xs-X 等更多内容在the v3 docsthe migration guide .

因此,如果您将 span4 类更改为(比如)col-md-4,您应该获得跨度。

请注意,如果视口(viewport)太小,单元格仍会堆叠;这就是各种不同的列类的用途。例如,使用您的浏览器以各种宽度 ( live copy ) 看这个:

<div class="container">
<div class="row">
<div class="col-lg-4">.col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-4">.col-xs-4</div>
</div>
</div>

您会发现,当您缩小视口(viewport)时,大的先堆叠;然后,如果您继续使用介质堆栈;然后是小东西,等等。

关于javascript - Bootstrap 跨度不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22347596/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com