我有以下代码包含左侧的导航文本,但不包括我向右拉的文本:
<div class="container-fluid">
<div class="row col-xs-12">
<div class="panel with-nav-tabs panel-tab-block">
<div class="panel-heading col-xs-3">
<ul class="nav nav-tabs nav-stacked flex-wrap">
<li><a data-toggle="tab" class="" href="#portfolio-project-tab-NLPortfolio"> NLPortfolio <span
class="pull-right">0</span>
</a></li>
<li class=""><a data-toggle="tab" class="" href="#portfolio-project-tab-motion" aria-expanded="false">
Motion Sports <span class="pull-right">0</span>
</a></li>
<li><a data-toggle="tab" class="" href="#portfolio-project-tab-afxprem"> Premiere Sports <span
class="pull-right">0</span>
</a></li>
<li><a data-toggle="tab" class="" href="#portfolio-project-tab-prelude"> Prelude Sports <span
class="pull-right">0</span>
</a></li>
<li class=""><a data-toggle="tab" class="" href="#portfolio-project-tab-psp" aria-expanded="false">
Photoshop Project <span class="pull-right">1</span>
</a></li>
<li><a data-toggle="tab" class="" href="#portfolio-project-tab-audiptx"> ProToolsProject <span
class="pull-right">0</span>
</a></li>
<li><a data-toggle="tab" class="" href="#portfolio-project-tab-afx"> AFX Sports <span
class="pull-right">0</span>
</a></li>
<li><a data-toggle="tab" class="" href="#portfolio-project-tab-c4d"> Cinema4D <span
class="pull-right">0</span>
</a></li>
<li><a data-toggle="tab" class="" href="#portfolio-project-tab-audi"> AuditionProject <span
class="pull-right">0</span>
</a></li>
<li><a data-toggle="tab" class="" href="#portfolio-project-tab-ARCPortfolio"> ARCPortfolio <span
class="pull-right">0</span>
</a></li>
<li class="active"><a data-toggle="tab" class="" href="#portfolio-project-tab-SNPortfolio" aria-expanded="true">
SNPortfolio <span class="pull-right">0</span>
</a></li>
<li><a data-toggle="tab" class="" href="#portfolio-project-tab-fcpsports"> FCP Sports <span
class="pull-right">0</span>
</a></li>
<li><a data-toggle="tab" class="" href="#portfolio-project-tab-illu"> IllustratorProject <span
class="pull-right">0</span>
</a></li>
<li><a data-toggle="tab" class="" href="#portfolio-project-tab-avid"> AvidProject <span
class="pull-right">0</span>
</a></li>
</ul>
</div>
<div class="panel-body col-sm-10">
<div class="tab-content">
<div id="portfolio-project-tab-NLPortfolio" class="tab-pane">
<div class="portfolio-overview-block"></div>
</div>
<div id="portfolio-project-tab-motion" class="tab-pane">
<div class="portfolio-overview-block"></div>
</div>
<div id="portfolio-project-tab-afxprem" class="tab-pane">
<div class="portfolio-overview-block"></div>
</div>
<div id="portfolio-project-tab-prelude" class="tab-pane">
<div class="portfolio-overview-block"></div>
</div>
<div id="portfolio-project-tab-psp" class="tab-pane">
<div class="portfolio-overview-block">
<div class="col-sm-4">
<div class="project-overview-card">
<div class="project-overview-card-content">
<div class="">
<label>Owner</label><span class="pull-right"> </span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="portfolio-project-tab-audiptx" class="tab-pane">
<div class="portfolio-overview-block"></div>
</div>
<div id="portfolio-project-tab-afx" class="tab-pane">
<div class="portfolio-overview-block"></div>
</div>
<div id="portfolio-project-tab-c4d" class="tab-pane">
<div class="portfolio-overview-block"></div>
</div>
<div id="portfolio-project-tab-audi" class="tab-pane">
<div class="portfolio-overview-block"></div>
</div>
<div id="portfolio-project-tab-ARCPortfolio" class="tab-pane">
<div class="portfolio-overview-block"></div>
</div>
<div id="portfolio-project-tab-SNPortfolio" class="tab-pane active">
<div class="portfolio-overview-block"></div>
</div>
<div id="portfolio-project-tab-fcpsports" class="tab-pane">
<div class="portfolio-overview-block"></div>
</div>
<div id="portfolio-project-tab-illu" class="tab-pane">
<div class="portfolio-overview-block"></div>
</div>
<div id="portfolio-project-tab-avid" class="tab-pane">
<div class="portfolio-overview-block"></div>
</div>
</div>
</div>
</div>
</div>
</div>
css如下:
.panel.with-nav-tabs.panel-tab-block {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.with-nav-tabs.panel-tab-block .nav-tabs > li > a,
.with-nav-tabs.panel-tab-block .nav-tabs > li > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > li > a:focus {
color: #ffffff;
background-color: #999999;
}
.with-nav-tabs.panel-tab-block .nav-tabs > .open > a,
.with-nav-tabs.panel-tab-block .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-tab-block .nav-tabs > li > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > li > a:focus {
color: #fff;
background-color: #666666;
}
.with-nav-tabs.panel-tab-block .nav-tabs > li.active > a,
.with-nav-tabs.panel-tab-block .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > li.active > a:focus {
color: #fff;
background-color: #2f70b1;
border-color: #2f70b1;
}
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu {
background-color: #428bca;
border-color: #3071a9;
}
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #fff;
}
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #3071a9;
}
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-tab-block .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
background-color: #4a9fe9;
}
我创建了a jsfiddle。
可以看到问题在于,向右拉的数据位于左侧导航文本下方但被截断。要查看此问题,请更改页面大小。任何想法如何解决这个问题?
答案 0 :(得分:0)
感谢您的建议。我有一点时间。
我最终将col-sm-2更改为col-xs-3 col-lg-2,并将相应的div从col-sm-10更改为col-xs-9 col-lg-10。