Bootstrap 4:具有相等高度的div,颜色填充和中间的沟槽

时间:2018-06-06 19:18:44

标签: html css twitter-bootstrap css3 bootstrap-4

我正在尝试实现一个我添加了屏幕截图的bootstrap 4布局。我阅读了大部分其他堆栈溢出帖子,但没有得到解决方案

  1. df1$newCol <- (rowSums(df1[1:3] > 0)) * df1$Disease1 df1$newCol #[1] 2 0 1 布局采用灰色填充颜色,即使用我的自定义类.container-fluid
  2. 根据设计,正文位于中心,所以我添加了.bg-grey类来包装列。
  3. .container.col-8.bg-white.col-4个类。而且我必须让它脱离同样的高度。
  4. 他们之间有一个排水沟(空间)。
  5. 面临问题

    1. 在右边获得额外的边距,因此设计没有恰当地居中。
    2. 设计尝试实现

       bootstrap 4 Layout : trying to achieve

      所以我的解决方案中的问题是,我在右边获得了额外的保证金。我已经尝试过两种情况,我有代码。

      案例1:

      使用以下代码尝试了很多,但无法实现解决方案。

      1. 如果我向.bg-dark添加保证金,则第二个div col-8会随着总宽度的增加而下降。
      2. 如果我向新子项添加.col-4.bg-white,则填充颜色的大小会发生变化。
      3. 对于新创建的div里面,我添加了.bg-dark类,但即便如此也不行
      4. No gutter or no equal height

        .h-100

        案例2:这个布局我尝试从bootstrap网站的下面的例子。 https://getbootstrap.com/docs/4.0/examples/product/

        这是当前代码的外观。边距不相等

        1. 尝试从<div class="col-sm-8 "> <div class="content px-4 py-2 bg-white h-100"> <h3 class="heading03">Life at </h3> <h2 class="heading02">.</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. </p> </div> </div> <div class="col-sm-4 "> <div class=" content px-4 py-2 bg-black white-text h-100"> <h5 class="heading05">Latest at </h5> <h4 class="heading04 text-muted">Top 10 </h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa... </p> <h5 class="heading05">Latest at </h5> <h4 class="heading04 text-muted">Top 10 </h4> <p class="m-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa... </p> </div> </div>删除. mr-md-3。它没有帮助
        2. design 2

          .col-4

2 个答案:

答案 0 :(得分:3)

这是您在同一标记中布置的文本,一个带有背景颜色,一个没有背景颜色,因此您可以直观地看到间距。

我已对文字进行了对齐,因此您可以看到应用于列的默认BS填充所代表的装订线

在我看来,BS在默认情况下做了很好的工作。

&#13;
&#13;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<div class="container-fluid bg-danger">
  <div class="p-4">
    <div class="row">
      <div class="col-8 bg-info">
        <h3 class="heading03">Life</h3>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
      </div>
      
      <div class="col-4 bg-dark text-white">
        <h2 class="display-5"> headline</h2>
        <p class="lead">subheading.</p>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
        </p>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="p-4">
    <div class="row">
      <div class="col-8">
        <h3 class="heading03">Life</h3>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.
        </p>
      </div>

      <div class="col-4">
        <h2 class="display-5"> headline</h2>
        <p class="lead">subheading.</p>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

如果你想要不同的背景颜色与视觉&#34;休息&#34;不要弄乱列填充和边距,但将其内容包装在div中并使用填充和边距进行播放

&#13;
&#13;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<div class="container-fluid bg-danger">
  <div class="p-4">
    <div class="row">
      <div class="col-8 bg-info">
        <div class="mr-1 bg-warning">
          <h3 class="heading03">Life</h3>
          <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        </div>
      </div>

      <div class="col-4 bg-dark text-white">
        <div class="ml-1 bg-warning">
        <h2 class="display-5"> headline</h2>
        <p class="lead">subheading.</p>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
        </p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="p-4">
    <div class="row">
      <div class="col-8">
        <div class="mr-1">
          <h3 class="heading03">Life</h3>
          <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        </div>
      </div>

      <div class="col-4 bg-dark text-white">
        <div class="ml-1">
        <h2 class="display-5"> headline</h2>
        <p class="lead">subheading.</p>
        <p class="text-justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
        </p>
        </div>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

我认为您正在寻找的解决方案是这样的。 (找到附上的片段)。

引导类h-100使div的高度达到100%,将col的两个子row的高度设置为相同的高度。你可以找到here

当它高度相同时,一切正常。边缘和阴沟。请查看下面的代码段。

我刚刚添加了背景颜色来区分变化。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<div class="container-fluid bg-danger pb-5 ">
<div class="row">
    <div class="container">


        <div class="row pt-5">              
            
            <div class="col-sm-8">
                <div class="content px-4 py-2 bg-white h-100">
                    <h3 class="heading03">Life at </h3>
                    <h2 class="heading02">We plan to be among them.</h2>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                        Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
                        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
                        rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
                        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
                        tellus.
                    </p>


                </div>
            </div>

            <div class="col-sm-4">
                <div class=" content px-4 py-2 bg-dark text-white h-100">
                    <h5 class="heading05">Latest at </h5>
                    <h4 class="heading04 text-muted">Top 10  </h4>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa...
                    </p>
                    <h5 class="heading05">Latest at </h5>
                    <h4 class="heading04 text-muted">Top 10  </h4>
                    <p class="m-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
                        massa...
                    </p>

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