Bootstrap排版问题

Bootstrap排版问题

详见Bootstrap官方文档

一、栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

二、如何实现排版

<div class="container-fluid">
  <div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>
  
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
</div>

效果如下：

三、嵌套列

1、代码

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

2、效果

3、总结

• 每一行（row）分为12个列（col） 。
• container中有row，row中有col 。
• 如果要实现嵌套列，需要在col中添加row后，才能添加col。

四、实际中遇到的问题

1、排版“失效”

Ⅰ、代码

 <div id="app" class="container-fluid">    <!--container-->

   <div class="row clearfix">                    <!--row-->
     <div class="col-lg-12 col-md-12 col-sm-12">    <!--col-->
       <div class="row card">                 <!--row-->
         <ul class="nav nav-tabs">
           <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tag" @click="change">标签</a></li>
           <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#date" @click="change">日期</a></li>
           <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#hot" @click="change">热门</a></li>
         </ul>
       </div>

       <div class="row tab-content">
         <!-- 标签 -->
         <div class="col-lg-12 col-md-12 col-sm-12 tab-pane active" id="tag">   <!--col-->
           <div class="row card">                <!--row-->
             <div class="col-lg-2 col-md-2 col-sm-2">           <!--col-->
             
               <strong style="color: #0d97ff">标签：</strong>
               <table class="table table-striped m-b-0">
                 <tbody>
                   <tr v-for="tag in tags">
                     <td><a style="color: #010101" @click="tagSelected(tag.id)">{{tag.tagName}}</a></td>
                     <td class="font-medium"></td>
                   </tr>
                 </tbody>
               </table>
             
             </div>

             <div class="col-lg-10 col-md-10 col-sm-10">       <!--col-->
      
               <a th:href="@{/stu/toStudyPage}">
                 <strong style="color: #0d97ff">问题：</strong>
               </a>
               <div class="card">
                 <div class="body">
                   <ul>
                     <li class="list-group-item" v-for="question in questions">

                       <div class="media">
                         <div class="pull-left">
                           <small style="color: #0d97ff">{{question.updateTime}}</small>
                           <div class="thumb hidden-sm-down m-r-20"><img
                                                                         th:src="@{/assets/images/xs/avatar1.jpg}" class="rounded-circle" alt="">
                           </div>
                         </div>

                         <div class="media-body">
                           <div class="media-heading">
                             <a href="#" class="m-r-10" @click="toAnsPage(question)">{{question.student.username}}</a>

                             <span v-for="questionAndTag in question.questionAndTags" class="badge bg-blue">
                               {{questionAndTag.tag.tagName}}
                             </span>

                             <a href="#" style="color:#3eacff;" class="pull-right" @click="toAnsPage(question)"><small class="float-right">点击回答</small></a>
                           </div>
                           <p class="msg">{{question.content}}</p>
                           <hr>
                         </div>
                       </div>
                     </li>
                   </ul>
                 </div>
               </div>
             </div>
           </div>
         </div>

     </div>
   </div>
  </div>

Ⅱ、效果

Ⅲ、疑问

​ 为什么col-lg-2理论上只占2列，为什么实际上占了一整行？

2、如何修改

方法1、找参照物

​ 黏贴官网代码，与自己要排版的效果进行比较

 <div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12">
     Level 1: .col-lg-12 col-md-12 col-sm-12
     <div class="row">
       <div class="col-lg-2 col-md-2 col-sm-2">
         Level 2: .col-lg-2 col-md-2 col-sm-2
       </div>
       <div class="col-lg-10 col-md-10 col-sm-10">
         Level 2: .col-lg-10 col-md-10 col-sm-10
       </div>
     </div>
   </div>
</div>

方法2 在浏览器上修改样式

效果

​ 发现代码布局正常显示

Ⅲ、原因

​ 经比较，发现row和card同时使用，会影响row中嵌套列的效果。

<div class="row card">                <!--row-->
  <div class="col-lg-2 col-md-2 col-sm-2">
  	 ...
  </div>
  <div class="col-lg-10 col-md-10 col-sm-10">
  	 ...
  </div>
</div>

Ⅳ、修改

<div class="row">
  <div class="col-lg-2 col-md-2 col-sm-2">
    <div class="card">
      ...
    </div>
  </div>
</div>

效果

3、总结

• row，col最好单独放在div的class中，不要和其他class对象混在一起绑定，布局会出错
• container{ row { col {row {col…} } } }，学会套娃，保证嵌套顺序不变即可，但不要求一定要紧紧挨着，中间有其他标签也可以。