gpt4 book ai didi

css - 如何让 twitter bootstrap 在 plunker 中工作?

转载 作者:太空宇宙 更新时间:2023-11-04 10:15:19 25 4
gpt4 key购买 nike

这应该很容易,但我总是无法在 plunker 中获得一个简单的 Bootstrap 示例。

我在 my plunker project 中有这个简单的 Bootstrap 示例:

<!DOCTYPE html>
<html>

<head>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body>
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<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 class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</body>

</html>

如果我点击“运行”按钮,似乎 Bootstrap 不可用。用 Chrom 检查 div 清楚地表明, Bootstrap 就在那里。但是根本没有格式化。

如果我点击预览按钮,一切都会按照预期进行格式化。

有什么解决办法吗?

最佳答案

预览窗口不够宽。

尝试使用 col-xs-1col-sm-8 而不是 col-md-1..!:-)

关于css - 如何让 twitter bootstrap 在 plunker 中工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37297597/

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