Question

我尝试清除段落中的浮动链接。我将clearfix设置为root div，其中包含浮动元素和普通元素。

<div class="container clearfix">
  <div class="row">
    <div class="col-md-12">
      <h2>Accountoverview</h2>
      <hr>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <p>
        <a href="#" class="btn btn-success pull-right">
         <span class="glyphicon glyphicon-plus"></span> 
          Test
        </a>
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>Username</th>
              <th>Email</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

例如： http://jsfiddle.net/mnlfischer/gv98D/3/

在视口大小为800px时，链接（按钮）会破坏结构。

有没有办法解决它？

全尺寸分辨率： http://jsfiddle.net/mnlfischer/gv98D/3/embedded/result/

Answer 1

我在父p标签中添加了一个clearfix。小提琴：http://jsfiddle.net/8aGC6/

<div class="row">
 <div class="col-md-12">
  <p class="clearfix">
    <a href="#" class="btn btn-success pull-right"><span class="glyphicon glyphicon-plus"></span> Test</a>
  </p>
 </div>
</div>

在段落和链接上使用bootstrap中的clearfix

1 个答案: