Bootstrap Left Nav Вкладки и содержимое

У меня есть HTML-страница с использованием Bootstrap и с навигационными вкладками слева в соответствии с первым ответом в this Вопрос StackOverflow. Пример моего кода: here, где я пытаюсь создать таблицу внутри второй вкладки. Однако, как я могу сделать таблицу непосредственно справа от вкладок, а не ниже всех из них?Bootstrap Left Nav Вкладки и содержимое

Я пробовал:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> 

</script> 

<body> 
    <h3>Tabs left</h3> 

    <!-- tabs left --> 
    <div class="tabbable tabs-left"> 
    <ul class="nav nav-tabs"> 
     <li><a href="#a" data-toggle="tab">One</a></li> 
     <li class="active"><a href="#b" data-toggle="tab">Two</a></li> 
     <li><a href="#c" data-toggle="tab">Twee</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="a">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. 
     <table class="table"> 
      <tr> 
      <th> H1 </th> 
      <th> H2 </th> 
      <th> H3 </th> 
      </tr> 

      <tr> 
      <td> 
       ABC 
      </td> 
      <td> 
       XYZ 
      </td> 
      <td> 
       123 
      </td> 
      </tr> 
      <tr> 
      <td> 
       One 
      </td> 
      <td> 
       Two 
      </td> 
      <td> 
       Twee 
      </td> 
      </tr> 
     </table> 
     </div> 
     <div class="tab-pane" id="b">Secondo sed ac orci quis tortor imperdiet venenatis.</div> 
     <div class="tab-pane" id="c">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit.</div> 
    </div> 
    </div> 
</div> 


</div> 
</body>

источник

2016-08-07 mbacvanski

просто добавить дисплей: блок в вашем .table класс по умолчанию отображает его в качестве дисплея: настольный

.table{ 
    display:block; 
}

https://jsfiddle.net/palak6041/xz4mfvgk/2/

источник

2016-08-07 03:33:41 BakerStreet221

Это ставит таблицу в той же строке, но как сделать таблицу шириной экрана? – mbacvanski

Bootstrap Left Nav Вкладки и содержимое

ответ

Смежные вопросы