Boostap4 和 @media 查询不能一起工作答案

【问题标题】：Boostap4 and @media queries not working togetherBoostap4 和 @media 查询不能一起工作
【发布时间】：2018-09-02 18:29:54
【问题描述】：

在添加Bootsrap4 CDN之前，这个sn-p的html根据媒体查询完美堆叠，但是一引入Bootstrap4 CDN，堆叠效果就消失了。

究竟是什么与 Bootstrap4 消除了这种堆叠效应有关，如果有一种方法可以在不实际移除 CDN 的情况下覆盖这种效应，你会建议它是什么？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
#about {
  color: #32CD32;
  padding-top:50px;
  background-color: black;
}
#about img {
    max-width: 100%;
    height: auto;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media (max-width: 768px) {
    /* For mobile phones: */
    .col-6{width:100%}
    [class*="col-"] {
        width: 100%;
    }
}
</style>

</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>
<div class='container-fluid'>
<div class="row">

<div class="col-3 menu">
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>

<div class="col-6">
  <h1>The City</h1>
  <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>

<div class="col-3 right">
  <div class="aside">
    <h2>What?</h2>
    <p>Chania is a city on the island of Crete.</p>
    <h2>Where?</h2>
    <p>Crete is a Greek island in the Mediterranean Sea.</p>
    <h2>How?</h2>
    <p>You can reach Chania airport from all over Europe.</p>
  </div>
</div>
</div>
 </div>


</body>
</html>

【问题讨论】：

标签： html css media-queries bootstrap-4

【解决方案1】：

这是因为 Bootstrap 4 在您更改宽度时使用 flexbox（flex-basis 和 max-width）来设置布局样式。因此，当您更改宽度时，它没有任何效果，因为已经有一个 max-width 应用于尚未更改的元素。

除了将移动设备的宽度更改为 100% 之外，您需要做的是将 max-width 更改为 100% 并将 flex-basis 属性更改为 100%。

这样就可以了。

[class*="col-"] {
    max-width: 100%;
  flex-basis: 100%
}

【讨论】：

就是这样！！谢谢，非常感谢您的回复。我担心我将不得不完全抛弃 CDN，因为我无法理解为什么。我现在将更多地研究 flexbox，以更好地了解它是什么以及它在这一切中扮演的角色。

【解决方案2】：

尝试添加其他 Bootstrap 4 组件：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

如果不是，您的 Bootstrap 4 CDN 和 媒体查询 之间可能存在某种冲突

【讨论】：