Bootstrap 3侧面导航包装

时间:2018-01-08 23:45:43

标签: html css twitter-bootstrap-3 nav

我有以下代码包含左侧的导航文本,但不包括我向右拉的文本:

<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

可以看到问题在于,向右拉的数据位于左侧导航文本下方但被截断。要查看此问题,请更改页面大小。任何想法如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

感谢您的建议。我有一点时间。

我最终将col-sm-2更改为col-xs-3 col-lg-2,并将相应的div从col-sm-10更改为col-xs-9 col-lg-10。