如何将 bootstrap 的 clearfix 应用到我的代码中？

Question

我在我的项目中使用所见即所得的编辑器，该编辑器的一部分包括将图像位置设置为左、右、内联的选项。当我选择向左时，它会赋予它向左浮动的特性。我想知道如何才能使包含我的内容的 div 自动扩展以允许浮动图像。

下面是我在项目中使用的部分帖子的代码

<div class="thumbnail">
  <div class="text">
    <%= link_to post.title, post_path(post), class: "h1" %>
    <p class="pull-right"><span class="glyphicon glyphicon-time"></span> Posted on <%= post.created_at.to_formatted_s :long %></p>
    <hr>
    <p><%= post.content.html_safe %></p><hr>
    <p>
      <% post.tags.any? %>
        <div class="btn-group btn-group-xs" role="group" aria-label="...">
          <% post.tags.each do |tag| %>
              <%= link_to tag.name, tag_path(tag), class: "btn btn-info" %>
          <% end %>
        </div>
    </p>
  </div>
</div>

Answer 1

试试这个，

<div class="clearfix"></div>

Answer 2

您也可以在 bootstrap 之外使用 clearfix。只要你在你的 CSS 中这样定义它：

.clearfix::after {
content: " ";
display: table;
clear: both; }

并将 "clearfix" class 应用于它需要的任何元素，如下所示：

<div class="clearfix"></div>

应该可以。

如何将 bootstrap 的 clearfix 应用到我的代码中？

How do I apply bootstrap's clearfix to my code?

html

css

ruby-on-rails

clearfix

twitter-bootstrap