Bootstrap，左侧二级菜单，div高度随内容变化，设置border宽度无效

笔者用Bootstrap写网站自适应已经接近尾声了，这是第二篇也是最后一篇博客记录我写自适应遇到的坑。这次笔者主要讨论三个问题：如何用Bootstrap写侧边栏二级目录、div高度随内容变化、设置border宽度无效的问题。

一、Bootstrap写侧边栏二级菜单

笔者实现二级菜单其实是用标签页做的。先看最终结果，再讨论代码：

自适应移动端后的效果如下：

笔者的实现思想是把标签页目录整体用class="col-xs-12 col-md-3"包起来，右边的内容部分整体用class="col-xs-12 col-md-9"。这样就将标签页变成了一个侧边栏的二级目录，并且自适应也写好了。以下是代码：

<ul class="nav col-md-3 col-xs-12 news_gategory_frame" role="tablist">
        <div class="news_gategory">CATEGORY</div>
        <li role="presentation" class="active col-md-12 col-xs-3" style="padding:0"><a href="#All" id="news_nav_item" role="tab" data-toggle="tab">全部新闻（1）</a></li>
        <li role="presentation" class="col-md-12 col-xs-3" style="padding:0"><a href="#Industr_Consulting" id="news_nav_item" role="tab" data-toggle="tab">行业咨询（1）</a></li>
        <li role="presentation" class="col-md-12 col-xs-3" style="padding:0"><a href="#Enterprise_Dynamics" id="news_nav_item" role="tab" data-toggle="tab">企业动态（0）</a></li>
        <li role="presentation" class="col-md-12 col-xs-3" style="padding:0"><a href="#Viewpoint_Article" id="news_nav_item" role="tab" data-toggle="tab">文章观点（0）</a></li>
    </ul>
    <!-- 面板区 -->
    <div class="col-md-9 col-xs-12 news_right_icon">
        <div style="float:right">首页/<a style="color:rgb(153, 153, 153);text-decoration:none;">新闻动态</a></div>
    </div>
    <div class="tab-content col-xs-12 col-md-9" style="padding-top:20px;background-color: white;min-height: 600px;margin-bottom: 30px;">
        <div role="tabpanel" class="tab-pane active" id="All">
            <div class="news_right_head">全部新闻</div>
            <div class="news_right_line"></div>
            <div class="news_right_item" onClick="window.location.href='./news_content.html'">
                <div class="news_right_item_tittle col-md-6 col-xs-4" style="padding:0">浅谈熔炼质量及成本控制</div>
                <div class="news_right_item_type col-md-3 col-xs-4" style="padding:0">行业咨询</div>
                <div class="news_right_item_date col-md-3 col-xs-4" style="padding:0">2018/12/26</div>
                <div style="clear:both;height:0px;padding:0px;margin:0px;"></div>
            </div>
            <div class="news_right_item_line"></div>
            <!-- 分页效果参考https://www.cnblogs.com/evilliu/articles/6393336.html -->
        </div>
        <div role="tabpanel" class="tab-pane" id="Industr_Consulting">
            <div class="news_right_head">行业咨询</div>
            <div class="news_right_line"></div>
            <div class="news_right_item" onClick="window.location.href='./news_content.html'">
                <div class="news_right_item_tittle col-md-6 col-xs-4" style="padding:0">浅谈熔炼质量及成本控制</div>
                <div class="news_right_item_type col-md-3 col-xs-4" style="padding:0">行业咨询</div>
                <div class="news_right_item_date col-md-3 col-xs-4" style="padding:0">2018/12/26</div>
            </div>
            <div class="news_right_item_line"></div>
        </div>
        <div role="tabpanel" class="tab-pane" id="Enterprise_Dynamics">
            <div class="news_right_head">企业动态</div>
            <div class="news_right_line"></div>
        </div>
        <div role="tabpanel" class="tab-pane" id="Viewpoint_Article">
            <div class="news_right_head">文章观点</div>
            <div class="news_right_line"></div>
        </div>
    </div>        

二、Div盒子高度随内容变化

就上述例子，笔者在做手机端自适应的时候，发现右边的文章标题变成多行后其父级div盒子高度并未变化，后来终于找到了解决办法，加入以下代码就OK了：

<div style="clear:both;height:0px;padding:0px;margin:0px;"></div>

三、Div设置border宽度后无效

这个坑真的是难以启齿，但是笔者怕以后会忘，所以还是记录一下。原因是border-style属性是用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 只有当这个值不是 none 时边框才可能出现。所以讲其设置为solid就行。

border-style: solid;

就研究生研究方向来看，估计以后还继续做web开发的可能性不大，但是如果读者需要探讨关于自适应的问题还是可以在下方留言。