Bootstrap：我的引导代码有什么问题
[英]Bootstrap: what is wrong in my bootstrap code
问题描述
这段代码有什么问题，它应该在我的平板电脑上有响应，但事实并非如此，我为两个 div 使用了 12 列，所以第三个应该在它们下面的新行中，但是当我检查我的 index.html 时。 html 在我的平板电脑上我发现它们都在一行中，这段代码有什么问题。
<link rel = "stylesheet" href="css/bootstrap.min.css">
<link rel = "stylesheet" href = "demo.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 ">Bootstrap Tutorial</div>
<div class="col-xs-6 ">Bootstrap Tutorial</div>
<div class="col-xs-4 ">Bootstrap Tutorial</div>
<button class="btn btn-primary">click</button>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="demo.js"></script>
</body>
2 个解决方案
解决方案1
3 已采纳 2018-02-18 19:37:11
col-xs-*类在 Bootstrap 4 中不存在（不再存在）。
用相应的col-*类替换所有这些。
参考：
https://getbootstrap.com/docs/4.0/migration/#grid-system
同样重要的是：
您的问题和代码表明您误解了预期的行为。
因此，我建议您在此处研究此页面上的文档：
https://getbootstrap.com/docs/4.0/layout/grid/
以下代码片段可能会让您更好地了解它的工作原理：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style> .row>[class^=col-] { padding-top: .75rem; padding-bottom: .75rem; background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.2); } </style> <div class="container"> <h2>Medium ('md') breakpoint:</h2> <div class="row"> <div class="col-md-6">Bootstrap Tutorial 1</div> <div class="col-md-6">Bootstrap Tutorial 2</div> <div class="col-md-6">Bootstrap Tutorial 3</div> </div> </div> <div class="container mt-3"> <h2>Large ('lg') breakpoint:</h2> <div class="row"> <div class="col-lg-6">Bootstrap Tutorial 1</div> <div class="col-lg-6">Bootstrap Tutorial 2</div> <div class="col-lg-6">Bootstrap Tutorial 3</div> </div> </div>
解决方案2
1 2018-02-18 19:52:47
试图跟上您对原始帖子的编辑。 无论如何，我将您所有的<script>和<link>标签移动到<head> 。 我将您的col-xs-*更改为col-* 。
编辑：感谢 Temani Afif，我更新了我的帖子。 此外，我推测他使用的是 BS4 而不是 BS3，因为我正在查看该帖子的早期版本。
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col col-6">Bootstrap Tutorial</div> <div class="col col-6">Bootstrap Tutorial</div> <div class="col col-4">Bootstrap Tutorial</div> </div> </div> </body>
使用引导程序验证器验证动态TinyMCE是一个错误，还是我的代码有问题？
[英]Is it a bug to validate dynamic TinyMCE with bootstrap validator or something wrong with my code?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.