                        课程
                    
                        /前端开发
                        
                            /Bootstrap
                        
                        /玩转Bootstrap（基础）

为什么btn类的<a>标签也要放在<p>里面

<div class="caption">
<h3>Bootstrap框架系列教程</h3>
<p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
<p>
<a href="##" class="btn btn-primary">开始学习</a>
<a href="##" class="btn btn-info">正在学习</a>
</p>
</div>

耂虍

2016-12-19

源自：玩转Bootstrap（基础） 7-2

关注问题我要回答

1568

操作

收起

3 回答

胖官与他的面包
2017-09-13

总结下上面大神讲的答案：就是这里的P标签有2个主要的作用。1是p标签默认的样式有上下文之间的间隔使画面看上去舒服点不会挤在一起。2就是可以自定义一个p标签内有多少个button，防止在空间富足的时候后面的button挤上来

1 回复有任何疑惑可以回复我~

收起回答

JS嘛霸哥
2017-02-23

<div class="caption">
  <h3>Bootstrap框架系列教程</h3>
  <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不
懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
  <p>
    <a href="##" class="btn btn-primary">开始学习</a>
    <a href="##" class="btn btn-info">正在学习</a>
  </p>
  <a href="##" class="btn btn-primary">开始学习</a>
  <a href="##" class="btn btn-info">正在学习</a>
  <a href="##" class="btn btn-danger">快学完了</a>
  <a href="##" class="btn btn-info disabled">我放弃</a>
</div>

看这段代码的效果图如左图所示：

显然，最后一个按钮跑到了下面一行去，因为摆不开了

对比上面的按钮，又多了一个，由于有富裕的空间，所以自动给上来了，同理，当代码如下所示时，可以看到，所有块都挤到一行来了

再者我们能够发现<p>标签之间还有一定的间距，不设置p标签则按钮与按钮或者图片，色块等等无间隔的挤在一起，页面效果不理想

所以这里p标签起到了一个分行，限制一行上按钮个数的目的，当一个p标签内的按钮数量过多，依然会挤到下一行，这是木有办法的事情，但是能有效的防止下面的标签挤上来。

希望能够帮到你

<div class="caption">
  <h3>Bootstrap框架系列教程</h3>
  <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不
懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
  <p>
    <a href="##" class="btn btn-primary">开始学习</a>
    <a href="##" class="btn btn-info">正在学习</a>
  </p>
  <a href="##" class="btn btn-primary">第一</a>
  <a href="##" class="btn btn-info">第二</a>
  <a href="##" class="btn btn-danger">第三</a>
  <a href="##" class="btn btn-info disabled">上来</a>
</div>