true life

如上圖所示，列表使用bootstrap做排版是一件很方便的事情，但會遇到一些狀況，如果其中一個list的內容較多時，變會有上圖2紅框所示的跑版狀況，通常這時會有好幾種解法，可以用css的overflow:hidden;或者是javascript的鎖字數達到每個list的高度是一致的；

但......有時候客戶並無法接受，為何我在後台新增的字不見?

經過講解後又無法接受時就可以用以下方法。

這是本來的HTML程式碼:

<section>
        <div class="container">

            <h2 class="title">解決Bootstrap跑版問題--1</h2>
                
            <ul class="info row">
                <li class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="https://dummyimage.com/346x250/1a9cc7/fff.jpg&text=pic" alt="">
                        </div>
                        <div class="text">
                            <h4>解決Bootstrap跑版</h4>
                            <p>塞clear both能解決，塞clear both能解決，塞clear both能解決</p>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                    <div class="wrapper">
                        <div class="pic">
                            <imgsrc="https://dummyimage.com/346x250/1a9cc7/fff.jpg&text=pic" alt="">
                        </div>
                        <div class="text">
                            <h4>解決Bootstrap跑版</h4>
                            <p>
                                <!-- 塞clear both能解決，塞clear both能解決，塞clear both能解決， -->
                                我的資訊多、不能用overflow:hidden、又或者我不能接受鎖字數，但這時我又使用                                               bootstrap做排版時，可以用一些方法解決此問題。
                                我的資訊多、不能用overflow:hidden、又或者我不能接受鎖字數，但這時我又使用                                              bootstrap做排版時，可以用一些方法解決此問題。
                                我的資訊多、不能用overflow:hidden、又或者我不能接受鎖字數，但這時我又使用                                               bootstrap做排版時，可以用一些方法解決此問題。
                                我的資訊多、不能用overflow:hidden、又或者我不能接受鎖字數，但這時我又使用                                               bootstrap做排版時，可以用一些方法解決此問題。
                                我的資訊多、不能用overflow:hidden、又或者我不能接受鎖字數，但這時我又使用                                                bootstrap做排版時，可以用一些方法解決此問題。
                                我的資訊多、不能用overflow:hidden、又或者我不能接受鎖字數，但這時我又使用                                              bootstrap做排版時，可以用一些方法解決此問題。
                                我的資訊多、不能用overflow:hidden、又或者我不能接受鎖字數，但這時我又使用                                              bootstrap做排版時，可以用一些方法解決此問題。
                            </p>
                        </div>
                    </div>
                </li>
               <li class="clearfix hidden-lg hidden-md"></li>
                
                <li class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="https://dummyimage.com/346x250/1a9cc7/fff.jpg&text=pic" alt="">
                        </div>
                        <div class="text">
                            <h4>解決Bootstrap跑版</h4>
                            <p>塞clear both能解決，塞clear both能解決，塞clear both能解決</p>
                        </div>
                    </div>
                </li>
               <li class="clearfix hidden-xs hidden-sm"></li> 

                <li class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                    <div class="wrapper">
                        <div class="pic">
                            <imgsrc="https://dummyimage.com/346x250/1a9cc7/fff.jpg&text=pic" alt="">
                        </div>
                        <div class="text">
                            <h4>解決Bootstrap跑版</h4>
                            <p>塞clear both能解決，塞clear both能解決，塞clear both能解決</p>
                        </div>
                    </div>
                </li>
               <li class="clearfix hidden-lg hidden-md"></li>

                <li class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                    <div class="wrapper">
                        <div class="pic">
                            <imgsrc="https://dummyimage.com/346x250/1a9cc7/fff.jpg&text=pic" alt="">
                        </div>
                        <div class="text">
                            <h4>解決Bootstrap跑版</h4>
                            <p>塞clear both能解決，塞clear both能解決，塞clear both能解決</p>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
                    <div class="wrapper">
                        <div class="pic">
                            <imgsrc="https://dummyimage.com/346x250/1a9cc7/fff.jpg&text=pic" alt="">
                        </div>
                        <div class="text">
                            <h4>解決Bootstrap跑版</h4>
                            <p>塞clear both能解決，塞clear both能解決，塞clear both能解決</p>
                        </div>
                    </div>
                </li>

                <li class="clearfix"></li> 

            </ul>
        </div>
    </section>

這邊不會解釋 bootstrap排版的網格，詳細的話可以google一下有很多bootstrap的教學，大略敘述一下:

col-lg-4 col-md-4 這兩個就是指在螢幕尺寸lg跟md的狀況，list是3個為一列；
col-sm-6 col-xs-6 這兩個就是指在螢幕尺寸sm跟xs的狀況，list是2個為一列；

簡單來說，就是要在2跟3的倍數塞進 <li class="clearfix"></li> 去清除浮動，解決跑版問題。

<li class="clearfix hidden-lg hidden-md"></li> 這個是以2的倍數，也就是說主要是用在sm跟xs的狀況，自然的再lg跟md的版型就不需要清除浮動，所以隱藏起來。

<li class="clearfix hidden-xs hidden-sm"></li> 指的是3個倍數，就是用在lg跟md的狀況，所以xs跟sm的螢幕尺寸不會用到。

其實這些以 "bootstrap"跑版為關鍵字google搜尋也是會有大神解釋的更清楚，在這邊因為小弟曾經卡在這個狀況一小段時間(其實好像滿久)，所以特別以這個做為筆記，如果能給來觀看者有些啟發那就再好不過了!