Question

我正在建立一个模拟网站，我的CSS非常生疏。我的容器中的行占据了很多高度。在我的第二行中，我希望它位于该行的下方，但它最终会在页面的末尾。我该如何解决这个问题？

html {
  width: 100%;
  height: 100%;
}

.container-fluid {
  overflow: hidden;
}

.desk {
  width: 100vw;
  height: 70vh;
}

.book {
  flex-direction: flex-start;
  position: absolute;
  width: 10vw;
  height: 10vh;
}

.logo {
  position: absolute;
  top: 10vh;
  font-family: 'Roboto', sans-serif;
}

.search {
  padding-left: 75vw;
  bottom: 65vh;
}

.popular {
  margin: 0 auto;
  bottom: 30px;
}

<body>
  <div class="container-fluid">
    <div class="row">
      <img src="./images/desk.png" class="desk">
      <div class="col book">
        <img src="./images/book.png" class="book">
        <h1 class="logo">Etomon</h1>
      </div>
      <div class="col search">
        <input type="text" class="" placeholder="Search?">
        <button type="submit">Submit</button>
        <form>
          subject/course <br>
          <input type="text" placeholder="Graphic Design"> <br> level <br>
          <input type="text" placeholder="Intermediate"> <br> starting <br>
          <input type="text" placeholder="mm/dd/yyyy"> <br> ending <br>
          <input type="text" placeholder="mm/dd/yyy"> <br>
          <button type="submit">Submit</button>
        </form>
      </div>
    </div>
    <div class="row">
      <h1 class="popular">Most Popular Subjects</h1>
    </div>

有没有办法控制bootstrap中的高度，或者我的html和css是如何布局的？

Answer 1

Bootstrap行旨在与列结合使用。因此，如果您将一个项目放入Bootstrap row但不放入该行内的col，或者如果您根本没有col，那将不可避免地弄乱事情。

哦，你想要做的一切，都可以单独使用本机Bootstrap类完成。不使用任何自定义CSS。

这是一个片段，在这种情况下应该使用jumbotron指导你正确的方向，因为我认为它是最合适的：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    #hero {
        background: url("https://picsum.photos/1280/710") no-repeat center;
        background-size: cover;
    }
</style>


<div class="jumbotron jumbotron-fluid" id="hero">
    <div class="container">
<!--
        <h1 class="display-4">Fluid jumbotron</h1>
        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
-->
        <div class="row">
            <div class="col-12 col-md-7 mb-4 book">
                <img src="https://picsum.photos/180/120" class="book">
                <h1 class="logo h2 text-light" style="margin-top: -50px;">Etomon</h1>
            </div>
            <div class="col search">
                <input type="text" class="" placeholder="Search?">
                <button type="submit">Submit</button>
                <form>
                    subject/course <br>
                    <input type="text" placeholder="Graphic Design"> <br> level <br>
                    <input type="text" placeholder="Intermediate"> <br> starting <br>
                    <input type="text" placeholder="mm/dd/yyyy"> <br> ending <br>
                    <input type="text" placeholder="mm/dd/yyy"> <br>
                    <button type="submit">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col">
            <h1 class="popular text-center">Most Popular Subjects</h1>
        </div>
    </div>
</div>

我的行占用了太多的高度

1 个答案: