Bootstrap не будет помещать мои две таблицы в два столбца рядом друг с другом

Попытка поставить две таблицы рядом друг с другом. Один col-md-4 и другой col-md-8 Я хочу, чтобы 4 были слева, а 8 - справа. Левый стол - это игровые сообщения и кнопки, а правый стол - это доска для игры в крестики-нолики. Я понимаю, что при использовании начальной загрузки мне просто нужны столбцы, чтобы в сумме получилось 12.

 </head>
  <body class = "bodyNormal">
    <div class = "container">
      <div class = "row">
        <div class = "col-md-12" style = "text-align: center">
          <h3 class = "mainimg">Tic Tac Toe Game</h3>
        </div>
      </div>
      <div class = "row bg-white">
        <div class = "col-md-4">
        <table class = "table">
          <tbody>
            <tr>
              <th>
                <button class = "btn" id = "newGame">? New game</button>
              </th>
            </tr>
            <tr>
              <th>2</th>
            </tr>
            <tr>
              <th>
                <h2 class = "player1Turn hidden">Player 1 Turn</h2>
                <h2 class = "player2Turn hidden">Player 2 Turn</h2>
              </th>
            </tr>
          </tbody>
        </table>
        <div class = "col-md-8">
          <table>
            <tr>
              <td class = "grid">7<img src = "X.jpg"</td>
              <td class = "vert grid">8<img src = "O.jpg"</td>
              <td class = "grid">9<img src = "X.jpg"</td>
            </tr>
            <tr>
              <td class = "hori grid">4<img src = "O.jpg"</td>
              <td class = "vert hori grid">5<img src = "X.jpg"</td>
              <td class = "hori grid">6<img src = "O.jpg"</td>
            </tr>
            <tr>
              <td class = "grid">1<img src = "X.jpg"</td>
              <td class = "vert grid">2<img src = "O.jpg"</td>
              <td class = "grid">3<img src = "X.jpg"</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <br />

    <script src = "index.js"></script>
    <script src = "node_modules/jquery/dist/jquery.js"></script>
    <script src = "node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
  </body>

html css bootstrap-4

06.04.2021 09:25

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы забыли один div закрыть для col-md-4

</table></div> /*Close Here One div*/
        <div class = "col-md-8">

https://jsfiddle.net/lalji1051/y0k4bs6p/3/

Вау, огромное спасибо! дурак я!

— 06.04.2021 09:39

06.04.2021 09:35

Проблема в том, что вы забыли закрыть div для col-md-4.

Обновленный код

<div class = "container">
  <div class = "row">
    <div class = "col-md-12" style = "text-align: center">
      <h3 class = "mainimg">Tic Tac Toe Game</h3>
    </div>
  </div>
  <div class = "row bg-white">
    <div class = "col-md-4">
      <table class = "table">
        <tbody>
          <tr>
            <th>
              <button class = "btn" id = "newGame">? New game</button>
            </th>
          </tr>
          <tr>
            <th>2</th>
          </tr>
          <tr>
            <th>
              <h2 class = "player1Turn hidden">Player 1 Turn</h2>
              <h2 class = "player2Turn hidden">Player 2 Turn</h2>
            </th>
          </tr>
        </tbody>
      </table>
    </div>
    <div class = "col-md-8">
      <table>
        <tr>
          <td class = "grid">7<img src = "X.jpg" </td>
          <td class = "vert grid">8<img src = "O.jpg" </td>
          <td class = "grid">9<img src = "X.jpg" </td>
        </tr>
        <tr>
          <td class = "hori grid">4<img src = "O.jpg" </td>
          <td class = "vert hori grid">5<img src = "X.jpg" </td>
          <td class = "hori grid">6<img src = "O.jpg" </td>
        </tr>
        <tr>
          <td class = "grid">1<img src = "X.jpg" </td>
          <td class = "vert grid">2<img src = "O.jpg" </td>
          <td class = "grid">3<img src = "X.jpg" </td>
        </tr>
      </table>
    </div>
  </div>
</div>

Ты прав! Большое вам спасибо за то, что взглянули на это!

— 06.04.2021 09:42

06.04.2021 09:40