为什么锚点出现在span之前

Question

我有以下标记，Preview锚点出现在文件名之前。

<div class="container">
  <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
  <span>  </span>
  <span>file1</span>
  <a class="btn btn-default btn-xs col-xs-2" target="_tab" href="#">Preview</a>
</div>

这是jsfiddle： https://jsfiddle.net/varungupta85/Luhcjs6r/5/

你能解释为什么锚点出现在跨度之前以及如何修复它？

Answer 1

  

为什么锚点出现在跨度

之前

这是因为引导类col-xs-2具有float:left，它会将其从正常文档流程<中删除。

关于如何解决：一种方法：从锚中删除col-xs-2类。

或者自己创建类......如：

a.btn-default.col-xs-2 {
   float: none;
}

Demo