我正在尝试实现一个我添加了屏幕截图的bootstrap 4布局。我阅读了大部分其他堆栈溢出帖子,但没有得到解决方案
df1$newCol <- (rowSums(df1[1:3] > 0)) * df1$Disease1
df1$newCol
#[1] 2 0 1
布局采用灰色填充颜色,即使用我的自定义类.container-fluid
。 .bg-grey
类来包装列。.container
有.col-8
,.bg-white
有.col-4
个类。而且我必须让它脱离同样的高度。面临问题
设计尝试实现
所以我的解决方案中的问题是,我在右边获得了额外的保证金。我已经尝试过两种情况,我有代码。
案例1:
使用以下代码尝试了很多,但无法实现解决方案。
.bg-dark
添加保证金,则第二个div col-8
会随着总宽度的增加而下降。.col-4
和.bg-white
,则填充颜色的大小会发生变化。.bg-dark
类,但即便如此也不行
.h-100
案例2:这个布局我尝试从bootstrap网站的下面的例子。 https://getbootstrap.com/docs/4.0/examples/product/
这是当前代码的外观。边距不相等
<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
。它没有帮助
.col-4
答案 0 :(得分:3)
这是您在同一标记中布置的文本,一个带有背景颜色,一个没有背景颜色,因此您可以直观地看到间距。
我已对文字进行了对齐,因此您可以看到应用于列的默认BS填充所代表的装订线
在我看来,BS在默认情况下做了很好的工作。
<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;
如果你想要不同的背景颜色与视觉&#34;休息&#34;不要弄乱列填充和边距,但将其内容包装在div中并使用填充和边距进行播放
<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;
答案 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>