Question

希望您一切都好！我在使用Bootstrap 4时很难实现某些目标。我想在下面制作类似此图的东西。

click here to see example 这意味着：一行带有列，右列分为两行。这两行（或块）不能超过父级高度（图像的高度）。

到目前为止我编写的最准确的代码：

 <div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-lg-6">
            <img class="img-fluid" src="img/nathan-dumlao-298337-unsplash.jpg" alt="logo-meltino">
        </div>
        <div class="col-lg-6">
            <div class="row bg-dark align-items-center justify-content-center h-50 p-5">
                <div class="col">
                    <p>Trabalhamos diariamente com café verde e torrado, o que permite explorar todas as suas potencialidades. O nosso empenho continuo no aperfeiçoamento deve-se à consciência de que o café é uma fonte inesgotável de conhecimento para todos aqueles que se envolvem com este produto. Apostamos na proximidade com todos intervinientes e processos, queremos melhorar cada dia para que a sua experiência com os nossos cafés seja única. Apostamos na proximidade com todos intervinientes e processos, queremos melhorar cada dia para que a sua experiência com os nossos cafés seja única. </p>
                </div>
            </div>
            <div class="row align-items-center justify-content-center h-50 p-5">
                <div class="col">
                    <h1>Já bebeu o seu café hoje?</h1>
                </div>
            </div>
        </div>
    </div>
</div>

我已经尝试了嵌套列，阅读了很多文章和文章，尝试了stackoverflow和CSS技巧中的技巧和窍门，例如被称为“ mini-box”和“ big-box”的东西。我真的不记得我曾经尝试过的所有代码，因为我不认为我会问到这里。

我在问，因为我尝试了很多事情，但没有找到解决方案。我认为这与我是Bootstrap的新手有关（我正在过渡），但我喜欢边做边学习！

我也非常希望能得到一个解释，因为我认为这是我应该分割主行后半部分的一种误解。

先谢谢您！

Answer 1

下面的代码应该可以工作，但是请记住，由于需要堆叠列，因此在较小的屏幕上无法使用布局。

#img {
  height: 500px;
  background-color: red;
}

@media (max-width: 767px) {
  .adjust-height {
    height: auto;
  }
}

@media (min-width: 768px) {
  .adjust-height {
    height: 50%;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-12 col-md-6">
            <div id="img">
                <!-- Replaces image -->
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="row h-100">
                <div class="col-12 adjust-height bg-primary">
                    <p>Trabalhamos diariamente com café verde e torrado, o que permite explorar todas as suas potencialidades. O nosso empenho continuo no aperfeiçoamento deve-se à consciência de que o café é uma fonte inesgotável de conhecimento para todos aqueles que se envolvem com este produto. Apostamos na proximidade com todos intervinientes e processos, queremos melhorar cada dia para que a sua experiência com os nossos cafés seja única. Apostamos na proximidade com todos intervinientes e processos, queremos melhorar cada dia para que a sua experiência com os nossos cafés seja única. </p>
                </div>
                <div class="col-12 adjust-height bg-secondary">
                    <p>DIV2</p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

检查

CSS

   .container > .row{ border:1px solid red;min-height:30%; }
   .container > .row > .col-md-6 > .row{ border:1px solid red;min-height:50%; }

HTML

<div class="container">
    <div class="row">
        <div class="col-md-6">
           <p>Side bar</p>
        </div>
        <div class="col-md-6">
           <div class="row">
                <p>Upper half</p>
           </div>
           <div class="row">
                <p>Lower half</p>
           </div>
        </div>
    </div>
</div>

Answer 3

请参阅Bootstrap文档和少量服装后的代码

body, html, main {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        background: black;
    }
    .h-100v {
        height: 100vh;
    }
    .h-50v {
        height: 50vh;
    }
    section.row {
        margin: 0px;
        padding: 0px;
    }
    figure {
        margin: 0px !important;
        padding: 0px !important;            
        overflow: hidden;
    }
    figure img {
        width: 100%;
    }

<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
    <main class="container">
    <section class="row h-100v">
        <figure class="col-xs-12 col-sm-12 col-md-6">
            <img src="https://images.unsplash.com/photo-1503327431567-3ab5e6e79140?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1600d7c3643474cad51afa03d891722c&w=1000&q=80" alt="Image Example" class="">
        </figure>
        <div class="col-xs-12 col-sm-12 col-md-6 bg-light">
            <div class="row">
                <div class="col-12 h-50v d-flex align-items-center bg-dark text-white">
                    <div class="col text-center">
                        <h1>This is title</h1>
                        <p>This area content 1.</p>
                    </div>
                </div>
                <div class="col-12 h-50v d-flex align-items-center bg-light">
                    <div class="col text-center">
                        <h1>This is title</h1>
                        <p>This area content 2.</p>
                    </div>
                </div>
            </div>
        </div>

    </section>
  </main>

li

Bootstrap 4-将列拆分为父div高度为50％的2行

3 个答案: