圣诞树动画

Question

Дмитрий Сухоцкий

Asked:2020-02-09 20:54:55 +0800 CST2020-02-09 20:54:55 +0800 CST 2020-02-09 20:54:55 +0800 CST

768px 的网格不会改变

772

请帮我解决问题。为自适应指定了必要的类。在 768 像素处它不会改变。在检查器中，@media (min-width: 768px) .col-md-6 { 以该分辨率写入，但块不太可能（如果 .col-md-6）。我哪里错了？大于和小于 768px 根据需要显示。

* {
  margin: 0;
  padding: 0;
  font-size: 10px;
  box-sizing: border-box;
}


/*-------------------------------------- header ---------------------------- */

.header-menu-col {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}

.header-section {
  background-color: #e9e9e9;
  position: relative;
  overflow: hidden;
}

.header-section .img-bg {
  background-repeat: no-repeat;
  opacity: .1;
  position: absolute;
  top: 0px;
  height: 100%;
}

.header-section .menu ul {
  display: flex;
  list-style-type: none;
}

.header-section .menu ul a {
  text-decoration: none;
  padding: 0 15px;
  color: #191919;
  font-family: "Montserrat";
  font-size: 12px;
  font-weight: bold;
  line-height: 24px;
  text-transform: uppercase;
}

.header-section .menu ul a:hover {
  color: #10c9c3;
}

.header-section .menu ul a.active {
  color: #10c9c3;
  letter-spacing: 1.2px;
}

.caption-header {
  justify-content: flex-end;
}

.caption-header h1 {
  color: #1d1d1d;
  font-family: "Montserrat";
  font-size: 38px;
  font-weight: bold;
  line-height: 48px;
}

.caption-header p {
  color: #787878;
  font-family: "Nunito Sans";
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  padding: 25px 0;
}

.caption-header-row {
  justify-content: flex-end;
  margin-top: 150px;
}

.caption-header-row a {
  padding: 20px 40px;
  background-color: #10c9c3;
  color: #FFF;
  font-family: "Montserrat";
  font-size: 12px;
  font-weight: 500;
  line-height: 84px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-decoration: none;
}

.caption-header-row a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.header-section .slider {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 40px 0 30px;
}

.header-section .slider div {
  border: 1px solid black;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 4px;
  opacity: .4;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.header-section .slider div.active {
  background-color: #10c9c3;
  opacity: .6;
}

.header-section .slider div:hover {
  background-color: #10c9c3;
  opacity: .6;
}

@media (max-width: 768px) {
  .menu {
    display: none;
  }
  .caption-header-row {
    margin-top: 50px;
  }
  .header-menu-col {
    justify-content: center;
  }
  .caption-header {
    text-align: center;
  }
}

@media (max-width: 568px) {
  .header-section .img-bg {
    overflow: hidden;
  }
}


/*-------------------------------------- /header ---------------------------- */


/*-------------------------------------- about ---------------------------- */

.about-section {
  padding: 50px 0;
  text-align: center;
}

.about-section h1 {
  color: #191919;
  font-family: Montserrat;
  font-size: 30px;
  font-weight: bold;
  line-height: 60px;
}

.about-section p {
  color: #787878;
  font-family: "Nunito Sans";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding: 25px 0;
}

@media (max-width: 768px) {
  .about-section p {
    font-size: 14px;
  }
}


/*-------------------------------------- /about ---------------------------- */


/*-------------------------------------- professional-skills-section ---------------------------- */

.row-professional-skills {
  align-items: center;
}

.professional-skills-section .progress {
  height: 3px;
}

.caption-professional-skills h1 {
  color: #171717;
  font-family: Montserrat;
  font-size: 30px;
  font-weight: bold;
  line-height: 84px;
}

.caption-professional-skills p {
  color: #000000;
  font-family: Montserrat;
  font-size: 12px;
  font-weight: bold;
  line-height: 30px;
  text-transform: uppercase;
}

.professional-skills-section img {
  width: 100%;
}

.professional-skills-section .image-block {
  overflow: hidden;
}

.professional-skills-section .lock-design {
  width: 100%;
}

@media (max-width: 768px) {
  .row-professional-skills {
    flex-direction: column-reverse;
  }
  .header-section {
    background-color: red;
  }
}


/*-------------------------------------- /professional-skills-section ---------------------------- */

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1" content="width=device-width">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Montserrat|Raleway" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style/style.css">

</head>

<body>
  <div id="header" class="header-section">
    <img src="https://preview.ibb.co/eG0rvc/header_bg.jpg" alt="header_bg" border="0" class="img-bg">
    <div class="container">
      <div class="row">
        <div class="col-xl-12 header-menu-col">
          <div class="logo">
            <a href="#"><img src="image/logo.png" width="31px" height="25px" alt="logo"></a>
          </div>
          <div class="menu">
            <ul>
              <li class="menu-item"><a class="active" href="#home">home</a></li>
              <li class="menu-item"><a href="#about">about</a></li>
              <li class="menu-item"><a href="#work">work</a></li>
              <li class="menu-item"><a href="#process">process</a></li>
              <li class="menu-item"><a href="#services">services</a></li>
              <li class="menu-item"><a href="#testcontact">testcontact</a></li>
              <li class="menu-item"><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <!-- /============================= /menu =========================== !-->
        </div>
        <!-- /============================= /col logo =========================== !-->
      </div>
      <div class="row caption-header-row">
        <div class="col-sm-12 col-md-6">
          <div class="caption-header">
            <h1>We Design and Develop</h1>
            <p>We are a new design studio based in USA. We have over 20 years of combined experience, and know a thing or two about designing websites and mobile apps.</p>
            <a href="#">contact us</a>
          </div>
        </div>
        <!-- /============================= /col menu =========================== !-->
      </div>
      <!-- /============================= /row =========================== !-->
      <div class="row">
        <div class="col">
          <div class="slider">
            <a href="#">
              <div class="active"></div>
            </a>
            <a href="#">
              <div></div>
            </a>
            <a href="#">
              <div></div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- /============================= /container =========================== !-->
  </div>
  <!-- /============================= /header-section =========================== !-->
  <div id="about" class="about-section">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-sm-12 col-md-12">
          <div class="caption-about">
            <h1>Abous us</h1>
            <p>Divide have don't man wherein air fourth. Own itself make have night won't make.<br> A you under Seed appear which good give. Own give air without fowl moveth dry first<br> heaven fruit, dominion she'd won't very all.</p>
            <img src="image/signature.png" alt="about us">
          </div>
        </div>
        <!-- /============================= /col  =========================== !-->
      </div>
      <!-- /============================= /row =========================== !-->
    </div>
    <!-- /============================= /container =========================== !-->
  </div>
  <!-- /============================= /about-section =========================== !-->
  <div id="professional-skills" class="professional-skills-section">
    <div class="container">
      <div class="row row-professional-skills">
        <div class="col-12 col-sm-12 col-md-6 professional-skills">
          <div class="caption-professional-skills">
            <h1>Professional Skills</h1>
            <div class="block-design">
              <p>UI/UX Design 75%</p>
              <div class="progress">
                <div class="progress-bar bg-info" role="progressbar" style="width: 75%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
            <div class="block-design">
              <p>web development 90%</p>
              <div class="progress">
                <div class="progress-bar bg-info" role="progressbar" style="width: 90%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
            <div class="block-design">
              <p>marketing 65%</p>
              <div class="progress">
                <div class="progress-bar bg-info" role="progressbar" style="width: 65%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
          </div>
        </div>
        <!-- /============================= /col  =========================== !-->
        <div class="col-12 col-sm-12 col-md-6 ">
          <div class="image-block">
            <img src="image/mobile_top.png" alt="mobile_top">
          </div>
        </div>
      </div>
      <!-- /============================= /row =========================== !-->
    </div>
    <!-- /============================= /container =========================== !-->
  </div>
  <!-- /============================= /about-section =========================== !-->
  <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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>

</html>

2 个回答

Voted

kizoso · Answer 1 · 2020-02-10T16:37:01+08:00

Best Answer

kizoso

2020-02-10T16:37:01+08:002020-02-10T16:37:01+08:00

1 - bootstrap 正式版已经发布，您可以使用完整版而不是 beta 版。

2 - 在第 4 个引导程序中，网格从小到大工作，即所谓的移动优先布局。你真的看错了方向，这里的类不是从大到小，反之亦然：

这意味着如果你需要一个小于 768 的大小，那么你需要一个前缀.col-sm-*，如果你不限制它，这个类将自下而上工作。也就是说，.col-sm-*它将从 576px 宽运行到最后。或者在您的情况下，您可以放置一个 class .col-*，如果您不使用 class 、或限制它，它将从最.col-sm-*底层开始.col-md-*工作。.col-ld-*.col-xl-*

您已经安装了.col-md-*一个适用于大于 768 像素的尺寸，但您希望它适用于更小的尺寸。

1

Дмитрий Мирошниченко · Answer 2 · 2020-02-09T23:13:12+08:00

Дмитрий Мирошниченко

2020-02-09T23:13:12+08:002020-02-09T23:13:12+08:00

问题出在这部分：

@media (max-width: 768px) {
.row-professional-skills {
    flex-direction: column-reverse;
}

此属性公开列中的元素。
最有可能的是，需要将媒体设为 767，或row-reverse.

0

768px 的网格不会改变

JavaScript需要一点帮助[重复]

获取 PHP 脚本的结果

如何检查 JSON 中是否存在元素？Python

这样的 typedef 是如何工作的？

关闭对php页面的访问

jQuery通过attr获取属性

用给定字符替换 std::string 中的所有字符

在多维数组中只保留唯一元素

你能告诉我如何为 JSON 反序列化创建一个类吗？[复制]

使用 volatile 关键字重载方法

768px 的网格不会改变

2 个回答

相关问题