Arhn - архитектура программирования

Как выровнять две таблицы в одной строке внутри панели Bootstrap?

Я хочу разместить рядом две таблицы в одной строке сетки, но таблицы просто складываются при запуске кода ниже:

<body>
...
<div class="container-fluid">
<div class="starter-template">

<div class='panel panel-primary'>
<div class='panel-heading'><h1>Main Title</h1></div>
<div class='panel-body'>

<div class='row-fluid'>
 <h4>Title</h4>
 <div class='span4'>
   <table class='table table-bordered'>
      <thead>
        <tr><th>feat1</th><th>feat2</th></tr></thead>
      <tbody>
      <tr><td>132</td><td>value a</td></tr>
      <tr><td>114</td><td>value b</td></tr>
      </tbody>
    </table>
  </div><!--closes table1-->

  <div class='span4'>
   <table class='table table-bordered'>
   <thead>
   <tr><th>feat1</th><th>feat3</th></tr>
      </thead>
      <tbody>
        <tr><td>264</td><td>val b</td></tr>
        <tr><td>3</td><td>val c</td></tr>
      </tbody>
    </table>
  </div><!--closes table2-->

</div>

</div><!--closes div panel-body-->
</div><!--closes div panel-->
</div> <!-- /.starter-template -->
</div><!-- /.container -->
...
</body>

В результате получается одна таблица во всей строке, а затем вторая под первой.

html css twitter-bootstrap
06.11.2014

Ответы:


1

Проверьте скрипку. Используйте col-xs-6, если вы все еще хотите отображать таблицы рядом на небольших экранах. Используйте col-lg-6, если вы хотите отображать таблицы в отдельных строках на небольших экранах. http://jsfiddle.net/DTcHh/1680/

<div class="row-fluid">
   <div class="col-xs-6">
      <div class="table-responsive">
         <table class="table table-bordered">
            <thead>
               <tr>
                  <th>One</th>
                  <th>One</th>
                  <th>One</th>
               </tr>
            <thead>
            <tbody>
               <tr>
                  <td>Two</td>
                  <td>Two</td>
                  <td>Two</td>
            </tbody>
         </table>
      </div>
   </div>
   <div class="col-xs-6">
      <div class="table-responsive">
         <table class="table table-bordered">
            <thead>
               <tr>
                  <th>One</th>
                  <th>One</th>
                  <th>One</th>
               </tr>
            <thead>
            <tbody>
               <tr>
                  <td>Two</td>
                  <td>Two</td>
                  <td>Two</td>
         </table>
      </div>
   </div>
</div>
06.11.2014
Новые материалы
Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..