Bootstrap 3 侧导航环绕

Question

我有以下代码将导航文本包装在左侧，而不是我拉到右侧的文本：

<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。

可以看到向右拉出的数据位于左侧导航文本下方但被截断的问题。要查看此问题，请更改页面大小。有什么解决办法吗？

Answer 1

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

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

Bootstrap 3 侧导航环绕

Bootstrap 3 Side Navigation Wrapping

html

css

nav

twitter-bootstrap-3