Question

我遇到了bootstrap 3和nav-justified类的问题。当我将导航器放在带有类col- *的div中时，它无法正常工作。当您尝试最小化屏幕时，如果分辨率小于1500px，则<li>溢出div。我想知道为什么。

我想知道我是否遗漏了什么。这里是代码的例子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
  <div class="col-sm-6">
    <div class="panel panel-default">
    <div class="panel-heading clickable">
        XYZ
        <span class="pull-right"><i class="fa fa-caret-up fa-lg"></i></span>
    </div>
    <div class="panel-body ">
        <ul class="nav nav-pills nav-justified" role="tablist" id="myPill">
            <li role="presentation" class="active"><a href="#externalio" aria-controls="home" data-toggle="tab">External I/O</a></li>
            <li role="presentation"><a href="#versionInformation" aria-controls="profile" data-toggle="tab">Version Information</a></li>
            <li role="presentation"><a href="#configInformation" aria-controls="profile" data-toggle="tab">Config Information</a></li>
            <li role="presentation"><a href="#channelA" aria-controls="profile" data-toggle="tab">Channel A</a></li>
            <li role="presentation"><a href="#statistics" aria-controls="profile" data-toggle="tab">Statistics</a></li>
            <li role="presentation"><a href="#adc" aria-controls="profile" data-toggle="tab">ADC</a></li>
            <li role="presentation"><a href="#samplingInfo" aria-controls="profile" data-toggle="tab">Sampling Info</a></li>
            <li role="presentation"><a href="#flags" aria-controls="profile" data-toggle="tab">Flags</a></li>
        </ul>
        <hr />
        <div class="tab-content" id="advancedContent">
            <div class="tab-pane active" id="externalio">
                
            </div>
            <div role="tabpanel" class="tab-pane" id="versionInformation">
                
            </div>
            <div role="tabpanel" class="tab-pane" id="configInformation">
                
            </div>
            <div role="tabpanel" class="tab-pane" id="channelA">
                
            </div>
            <div role="tabpanel" class="tab-pane" id="statistics">
                
            </div>
            <div role="tabpanel" class="tab-pane" id="adc">
                
            </div>
            <div role="tabpanel" class="tab-pane" id="samplingInfo">
               
            </div>
            <div role="tabpanel" class="tab-pane" id="flags">
                
            </div>
        </div>        
    </div>

</div>
</div>
  </div>
</div>

谢谢。

Answer 1

我有一个简单的解决方案。请使用以下代码：

@media screen and (max-width:1500px){
    .panel .nav>li>a{
         padding:5px 0;
    }
}

在div.col- *内部引导导航对齐不能按预期工作

1 个答案: