CSS Bootstrap 4 中的“.well”等效类是什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38620737/
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
What is the '.well' equivalent class in Bootstrap 4
提问by Jobin
In bootstrap-3 there is .wellclass which adds a rounded border around an element with a gray background color and some padding.
在 bootstrap-3 中有一个.well类，它在一个带有灰色背景颜色和一些填充的元素周围添加一个圆形边框。
<div class="well">Basic Well</div>
But, I didn't find any .wellclass in bootstrap-4. Is there any tag equivalent to .wellin bootstrap-4?
但是，我.well在 bootstrap-4 中没有找到任何类。是否有与.wellbootstrap-4等效的标签？
回答by Zim
Update 2018...
更新 2018...
cardhas replaced the well.
card已经取代了well。
Bootstrap 4
引导程序 4
<div class="card card-body bg-light">
Well
</div>
or, as two DIVs...
或者，作为两个 DIV...
<div class="card bg-light">
<div class="card-body">
...
</div>
</div>
(Note: in Bootstrap 4 Alpha, these were known as card-blockinstead of card-bodyand bg-fadedinstead of bg-light)
（注意：在 Bootstrap 4 Alpha 中，这些被称为card-block代替card-body和bg-faded代替bg-light）
回答by Emre Bolat
Wells are dropped from Bootstrap with the version 4.
Wells 从 Bootstrap版本 4中删除。
You can use Cardsinstead of Wells.
您可以使用Cards而不是 Wells。
Here is a quick example for how to use new Cards feature:
以下是如何使用新卡片功能的快速示例：
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<div class="card-block">
<h3 class="card-title">Card Title</h3>
<p class="card-text">This text will be written on a grey background inside a Card.</p>
<a href="#" class="btn btn-primary">This is a Button</a>
</div>
</div>
回答by Raef Akehurst
This worked best for me:
这对我来说效果最好：
<div class="card bg-light p-3">
<p class="mb-0">Some text here</p>
</div>
回答by Shoe
None of the answers seemed to work well with buttons. Bootstrap v4.1.1
似乎没有一个答案与按钮配合得很好。引导程序 v4.1.1
<div class="card bg-light">
<div class="card-body">
<button type="submit" class="btn btn-primary">
Save
</button>
<a href="/" class="btn btn-secondary">
Cancel
</a>
</div>
</div>
回答by sachin arora
Sure officially versionsays the cards are the new replacements for Bootstrap wells. But Cards are a quite broad Bootstrap components now. In simple terms, you can also use Bootstrap Jumbotrontoo.
当然官方版本说这些卡是 Bootstrap 井的新替代品。但是 Cards 现在是一个相当广泛的 Bootstrap 组件。简单来说，您也可以使用Bootstrap Jumbotron。
回答by krekto
I'm mading my classes well for class alert, for me it looks like it's getting nice, but some tweaks are sometimes needed as to put the width 100%
我正在为班级警报做好我的班级，对我来说它看起来越来越好，但有时需要进行一些调整以将宽度设为 100%
<div class="alert alert-light" style="width:100%;">
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
回答by DrOne
Card seems to be "discarded" LOL, I found the "well" not working with bootstrap 4.3.1 and jQuery v3.4.1, just working fine with bootstrap 4.3.1 and jQuery v3.3.1. Hope it helps.
卡似乎被“丢弃” LOL，我找到了“好”不是引导4.3.1和jQuery V3.4.1工作，只是工作的罚款与引导4.3.1和jQuery V3.3.1。希望能帮助到你。
