bootstrap栅格3列变形了，怎么解决？

Question

如图，做上角是导航，右面是内容，如果高度高过导航栏，内容就偏移了过去

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-1" data-spy="affix">
    </div>
     <div class="tab-content"  role="main">
        <div class="tab-pane fade in active " id="d1">
          <ul>
            <li class="col-lg-5 col-xs-5"><img src="Gravity.jpg"></li>
            <li class="col-lg-5 col-xs-5"><img src="Gravity.jpg"></li>
          </ul>
        </div>
         <div class="tab-pane fade" id="d2">
          <ul>
            <li class="col-lg-5 col-xs-5"><img src="Gravity.jpg"></li>
            <li class="col-lg-5 col-xs-5"><img src="Gravity.jpg"></li>
            <li class="col-lg-5 col-xs-5"><img src="Gravity.jpg"></li>
            <li class="col-lg-5 col-xs-5"><img src="Gravity.jpg"></li>
            <li class="col-lg-5 col-xs-5"><img src="Gravity.jpg"></li>
            <li class="col-lg-5 col-xs-5"><img src="Gravity.jpg"></li>
            <li class="col-lg-5 col-xs-5"><img src="Gravity.jpg"></li>
            <li class="col-lg-5 col-xs-5"><img src="Gravity.jpg"></li>
            <li class="col-lg-5 col-xs-5"><img src="Gravity.jpg"></li>
            <li class="col-lg-5 col-xs-5"><img src="Gravity.jpg"></li>
          </ul>
         </div>
      </div>
     </div>
</div>

Answer 1

我发现是自己的布局问题 改过就好了

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-1" data-spy="affix">
      <nav class="bs-docs-sidebar" >
        <ul id="myTab" class="nav nav-pills nav-stacked"  style="text-align:center">
          <li role="presentation"><a class="collapse" href="#pill1" data-toggle="collapse">pill 1</a>
            <ul id="pill1" class="collapse">
              <li><a href="#d1" data-toggle="tab">1</a></li>
              <li><a href="#d2" data-toggle="tab">2</a></li>
              <li><a href="#d3" data-toggle="tab">3</a></li>
            </ul>
          </li>
          <li role="presentation"><a class="collapse" href="#pill2" data-toggle="collapse"> Pill 2 </a>
            <ul id="pill2" class="collapse">
              <li>1</li>
              <li>2</li>
              <li>3</li>
            </ul>
          </li>
          <li role="presentation"><a href="3.html" target="content">Pill 3</a></li>
          <li role="presentation"><a href="4.html" target="content">Pill 4</a></li>
          <li role="presentation"><a href="5.html" target="content">Pill 5</a></li>
          <li role="presentation"><a href="6.html" target="content">Pill 6</a></li>
        </ul>
      </nav>
    </div>
    <div class="col-xs-11 col-lg-11" >       
    <div class="tab-pane fade in active " id="d1">
      <ul>
        <li style="width:50%;float:left"><img src="Gravity.jpg"></li>
        <li style="width:50%;float:left"><img src="Gravity.jpg"></li>
        <li style="width:50%;float:left"><img src="Gravity.jpg"></li>
        <li style="width:50%;float:left"><img src="Gravity.jpg"></li> <li style="width:50%;float:left"><img src="Gravity.jpg"></li>
        <li style="width:50%;float:left"><img src="Gravity.jpg"></li>
         <li style="width:50%;float:left"><img src="Gravity.jpg"></li>
        <li style="width:50%;float:left"><img src="Gravity.jpg"></li>
      </ul>
    </div>
  
  </div>
</div>
</div>

Answer 2

尼玛，我怎么猜得到你的代码啊

Answer 3

问题描述不清 错字满篇 还没界面代码....想来还没入门