Bootstrap 4中的'.well'等价类是什么


129

在bootstrap-3中,有一个.well类可以在元素周围添加带有灰色背景色和填充的圆形边框。

<div class="well">Basic Well</div>

但是,我.well在bootstrap-4中没有找到任何类。是否有与.wellbootstrap-4中等效的标签?


4
well已完全删除新卡组件。v4-alpha.getbootstrap.com/migration
Clyde Lobo,

Answers:


212

更新2018 ...

card已取代well

引导程序4

<div class="card card-body bg-light">
     Well
</div>

,作为两个DIV ...

<div class="card bg-light">
    <div class="card-body">
        ...
    </div>
</div>

(注意:在Bootstrap 4 Alpha中,这些被称为card-block代替card-bodybg-faded代替bg-light

http://codeply.com/go/rW2d0qxx08


38

Wells从版本4的 Bootstrap中删除。

您可以使用Cards代替Wells。

这是有关如何使用新卡功能的快速示例:

<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>


4

用按钮似乎没有一个很好的答案。Bootstrap 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>

1
没错,我可以确认您需要将单独的card-body类附加到其自己的div上才能使按钮正常显示!
skiabox


0

我正在为班级警报做好上课准备,对我来说看起来好像越来越好了,但是有时需要进行一些调整以将宽度设置为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>

0

卡似乎被“丢弃” LOL,我找到了“好”不是引导4.3.1和jQuery V3.4.1工作,只是工作的罚款与引导4.3.1和jQuery V3.3.1。希望能帮助到你。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.