2.3.6　并列元素样式

在很多情况下，一个组件内部需要放置多个子元素，比如导航组件（nav）里可以放置多个li元素，按钮组里可以放置多个button元素。如果有这种情况，就需要处理这样并列元素的间距问题了。一般来说，只需要考虑两方面即可：其一水平并列时候的左右内边距（padding-left、padding-right）和外边距（margin-left、margin-right）；其二：垂直并列时的上下内边距（padding-top、padding-bottom）和外边距（margin-top、margin-bottom）。

举个例子，alert组件里，有时候要提示两段内容，这时候就需要用到两个p元素，所以需要处理这种情况的样式。源码如下所示：

  1. // 源码4447行
  2. .alert > p {
  3.   margin-bottom: 0;             /* alert内的p元素和ul元素的底部外边距设置 */
  4. }
  5. .alert > p + p {
  6.   margin-top: 5px;              /*两个段落之间,增加一个顶部外边距*/
  7. }

而在模态弹窗组件（modal）的底部，经常需要显示多个按钮（比如：“保存”、“取消”等），这时候就需要处理水平并列的情况了。源码如下所示。

  1. // 源码5178行
  2. .modal-footer .btn + .btn {
  3. /* 底部区域内的按钮样式设置,如果有多个按钮,设置左部外边距 */
  4.   margin-bottom: 0;
  5.   margin-left: 5px;
  6. }