文章/答案/技术大牛

发布

社区首页 >问答首页 >未应用于容器的div高度

问未应用于容器的div高度
EN

Stack Overflow用户

提问于 2019-08-24 04:39:47

回答 2查看 63关注 0票数 1

所以我对bootstrap 4和sass是个新手，我想第一次用它们做一个项目。当我试图构建一个高度为900px的div时，问题就来了，但不知何故，它没有显示出来。只有当我真的把东西放进去的时候它才会出现。我在这里做错了什么？

因为我使用的是sass，所以会有问题吗？或者它是完全不同的东西？

代码：

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.I {
  width: 100%;
  height: 2000px;
}

.II {
  height: auto;
  width: 100%;
  background-image: url(https://66.media.tumblr.com/94fb0667afbd3be221b09eb507991a22/tumblr_pwp1fg971T1qjb5z3o2_1280.png);
  background-size: cover;
  color: white;
}

.II .nav-link {
  color: white;
}

.II a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

.II a:hover {
  color: #cacaca;
}

.IV {
  background-color: #6362a7;
  width: 100%;
  height: 900px !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 50px;
}

.fa-suitcase {
  color: #f5b944;
}

.col-md-2 {
  margin-right: 0px;
  width: 15%;
}


/*# sourceMappingURL=webwavers.css.map */

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<body>
  <div class="I container-fluid">
    <div class="row">
      <div class="II container-fluid">
        <nav class="navbar navbar-expand-md navbar-dark">
          <a class="navbar-brand" href="#">COSMOS</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    				    <span class="navbar-toggler-icon"></span>
    				  </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto offset-1">
              <li class="nav-item offset-2">
                <a class="nav-link" href="#">Home </a>
              </li>
              <li class="nav-item offset-2">
                <a class="nav-link" href="#">Projects</a>
              </li>
              <li class="nav-item offset-2">
                <a class="nav-link" href="#">Services</a>
              </li>

            </ul>
          </div>
        </nav>
      </div>
    </div>
    <div class="row">
      <!-- <div class="III container"> -->

    </div>
    <div class="row">
      <div class="IV container-fluid">
        <!--im small and i should be 900 px in height-->

      </div>
    </div>
  </div>

css

twitter-bootstrap

sass

回答 2

Stack Overflow用户

发布于 2019-08-25 06:31:41

一个简单的.container-fluid > .row > .col-12就可以了。如果给.col-12 (或它的任何子类)一个height of 900px，它就会被应用。工作示例：

.min-900 {
  border: 3px solid red;
  height: 900px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
  <a class="navbar-brand" href="#">COSMOS</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto offset-1">
      <li class="nav-item offset-2">
        <a class="nav-link" href="#">Home </a>
      </li>
      <li class="nav-item offset-2">
        <a class="nav-link" href="#">Projects</a>
      </li>
      <li class="nav-item offset-2">
        <a class="nav-link" href="#">Services</a>
      </li>
    </ul>
  </div>
</nav>

<main class="container-fluid">
  <div class="row">
    <div class="col-12 min-900"></div>
  </div>
</main>

如果您想使用min-height而不是height，那么您的选择器必须有一个以上的类的特异性，因为.col-*类有一个min-height为1px，您需要覆盖它。示例：

div.min-900 {
  border: 3px solid red;
  min-height: 900px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
  <a class="navbar-brand" href="#">COSMOS</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto offset-1">
      <li class="nav-item offset-2">
        <a class="nav-link" href="#">Home </a>
      </li>
      <li class="nav-item offset-2">
        <a class="nav-link" href="#">Projects</a>
      </li>
      <li class="nav-item offset-2">
        <a class="nav-link" href="#">Services</a>
      </li>
    </ul>
  </div>
</nav>

<main class="container-fluid">
  <div class="row">
    <div class="col-12 min-900"></div>
  </div>
</main>

票数 1

Stack Overflow用户

发布于 2019-08-25 06:55:58

正如评论中所说，不要将内容直接放入row。实际上，您需要将其放入col-*-*中，因此您需要将其更改为.row > col-*-* > (content)。我使用的是简单的符号。<div class="warning><p class="bold">content</p></p>对应于warning > bold > (content)。我想你现在应该明白我说的话了。

希望这能有所帮助！

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57632758

复制

相似问题

问未应用于容器的div高度
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未应用于容器的div高度EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未应用于容器的div高度
EN