Html Bootstrap/flexbox 卡：将图像移动到桌面的左侧/右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39225608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap/flexbox card: move image to left/right side on desktop
提问by m5seppal
I'm trying to build following card layout using Bootstrap 4 with flexbox enabled. Picture is taken from my current implementation and it works like expected.
我正在尝试使用启用了 flexbox 的 Bootstrap 4 构建以下卡片布局。图片取自我当前的实现，它按预期工作。
HTML structure is following:
HTML结构如下：
<section>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-block">
<h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
<p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
<p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div class="col-md-6">
<img class="card-img-bottom" src="img1.jpg" alt="" title="">
</div>
</div>
</div>
</section>
Now when I scale to larger screen, I got following output (which is expected with Bootstrap but not wanted one):
现在，当我缩放到更大的屏幕时，我得到了以下输出（Bootstrap 可以预期但不需要）：
What I would like to see instead is:
我想看到的是：
So my question is, how I can properly implement this kind of layout? I'm using flex-box, so Bootstrap columns (col-*) are always same height which is exactly what I want. But I should remove the paddings between two columns, then make both columns content always to cover 100% of parent height, and finally make sure that picture maintains it's aspect ratio, so it should be cropped from the center like I have in example.
所以我的问题是，如何正确实现这种布局？我正在使用 flex-box，所以 Bootstrap 列（col-*）总是相同的高度，这正是我想要的。但是我应该删除两列之间的填充，然后使两列内容始终覆盖父高度的 100%，最后确保图片保持其纵横比，因此应该像我在示例中那样从中心裁剪。
I've Googled and tried many different solutions but all of them seems to be overly complex or "hacky" solutions. So I'm wondering is it true that there is no easy way to implement this kind of layout...?
我用谷歌搜索并尝试了许多不同的解决方案，但所有这些似乎都过于复杂或“hacky”解决方案。所以我想知道是否没有简单的方法来实现这种布局......？
Note: solution doesn't have to be Bootstrap related, general solution for this kind of problem is even better.
注意：解决方案不必与 Bootstrap 相关，此类问题的通用解决方案甚至更好。
回答by m5seppal
Update: Bootstrap officially supports horizontal cards nowadays
更新：Bootstrap 现在正式支持横卡
I created a feature request for this back in time: https://github.com/twbs/bootstrap/issues/20794. Nowadays Bootstrap has horizontal cards supported and documented.
我及时为此创建了一个功能请求：https: //github.com/twbs/bootstrap/issues/20794。如今，Bootstrap 已经支持和记录了水平卡。
Bootstrap implementation is based on a combination of grid and utility classes:
Bootstrap 实现基于网格和实用程序类的组合：
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
The solution is effectively pretty much the same as I used. You still might need to do minor tweaks to make it work as you wish, also stated in the documentation: "Further adjustments may be needed depending on your card content".
该解决方案实际上与我使用的几乎相同。您可能仍然需要进行一些细微的调整以使其按您的意愿工作，文档中也有说明：“根据您的卡片内容，可能需要进一步调整”。
Original answer
原答案
I figured out one way to do this, using background-size: cover. I had to use div instead of img but otherwise this solution works and in my case img is not so necessary. Other solutions are still welcome.
我想出了一种方法来做到这一点，使用背景大小：封面。我不得不使用 div 而不是 img 但否则这个解决方案有效，在我的情况下 img 不是那么必要。仍然欢迎其他解决方案。
I modified my html a little:
我稍微修改了我的 html：
<section>
<div class="container">
<div class="card">
<div class="row">
<div class="col-md-6">
<div class="card-block">
<h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
<p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
<p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
<div class="col-md-6">
<div class="card-img-bottom">
</div>
</div>
</div>
</div>
</div>
</section>
For card-img-bottom, I set style:
对于 card-img-bottom，我设置了样式：
.card-img-bottom {
color: #fff;
height: 20rem;
background: url(images/img1.jpg) center no-repeat;
background-size: cover;
}
And in the desktop view, I change the height to 100% so the height is always the same than the height of card-block.
在桌面视图中，我将高度更改为 100%，因此高度始终与卡片块的高度相同。
There is still some extra padding between card-block and card-img-bottom in the desktop view because of Bootstrap default paddings. For that reason, the white area is slightly bigger than the image. For me, it's not an issue so I didn't remove them.
由于 Bootstrap 默认填充，桌面视图中的 card-block 和 card-img-bottom 之间仍然有一些额外的填充。因此，白色区域比图像稍大。对我来说，这不是问题，所以我没有删除它们。
回答by Luciano Louren?o
One solution I found, I'm having problems with image height, but that's another question ...: P
我找到了一个解决方案，我在图像高度方面遇到了问题，但这是另一个问题......：P
OK, the big problem of reinventing something that is already ready is that the solutions tend to give problems when we need the original features, so in my solution, we just added a class, which would work together with the other case the class was used , so if the "card-img-left" class exists the "card-budy" class would have a left margin proportional to the size of the left-aligned image, if the class does not exist this margin would be the original. It is a viable solution and would not disrupt the original system, but it has to be refined ...
好的，重新发明已经准备好的东西的大问题是，当我们需要原始功能时，解决方案往往会出现问题，所以在我的解决方案中，我们只是添加了一个类，该类将与使用该类的其他情况一起工作，所以如果“card-img-left”类存在，“card-budy”类的左边距与左对齐图像的大小成正比，如果该类不存在，这个边距将是原始的。这是一个可行的解决方案，不会破坏原始系统，但必须对其进行改进......
.card {
overflow: hidden;
}
.card-img-left {
position: absolute;
height: auto;
max-height: 100%;
width: auto;
max-width: 40%;
}
.card-img-left ~ .card-body {
margin-left: 40%;
}
