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.