Сделайте таблицы в контейнере-жидкости отзывчивыми - PullRequest
0 голосов
/ 24 июня 2018

Я создал две таблицы с bootstrap 4.0:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-6">
      <div class="pr-1">
        <h2>Specifications</h2>
        <table class="table stats">
          <tbody>
            <tr>
              <th>Price :</th>
              <td class=" text-right">
                100 </td>
            </tr>
            <tr>
              <th>Manufacturer:</th>
              <td class=" text-right">
                Gigabyte </td>
            </tr>
            <tr>
              <th>Wattage:</th>
              <td class=" text-right">
                150 </td>
            </tr>
            <tr>
              <th>Product:</th>
              <td class=" text-right">
                Product 1 </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="col-6">
      <div class="pr-1">
        <h2>Earning</h2>
        <table class="table stats">
          <tbody>
          </tbody>
          <thead>
            <tr>
              <th>Period</th>
              <th class="text-right">Rev</th>
              <th class="text-right">Cost</th>
              <th class="text-right">Profit</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Hour</td>
              <td class="text-right text-info">$
                <span id="rev-hour">
                            0.022                        </span>
              </td>
              <td class="text-right text-danger">$
                <span id="cost-hour">
                            0.006                        </span>
              </td>
              <td class="text-right text-success">$
                <span id="earning-hour">
                            0.016                        </span>
              </td>
            </tr>
            <tr>
              <td>Day</td>
              <td class="text-right text-info">$
                <span id="rev-day">
                            1.34                        </span>
              </td>
              <td class="text-right text-danger">$
                <span id="cost-day">
                            0.36                        </span>
              </td>
              <td class="text-right text-success">$
                <span id="earning-day">
                            0.98                        </span>
              </td>
            </tr>
            <tr>
              <td>Week</td>
              <td class="text-right text-info">$
                <span id="rev-week">
                            9.37                        </span>
              </td>
              <td class="text-right text-danger">$
                <span id="cost-week">
                            2.52                        </span>
              </td>
              <td class="text-right text-success">$
                <span id="earning-week">
                            6.85                        </span>
              </td>
            </tr>
            <tr>
              <td>Month</td>
              <td class="text-right text-info">$
                <span id="rev-month">
                            37.48                        </span>
              </td>
              <td class="text-right text-danger">$
                <span id="cost-month">
                            10.08                        </span>
              </td>
              <td class="text-right text-success">$
                <span id="earning-month">
                            27.40                        </span>
              </td>
            </tr>
            <tr>
              <td>Year</td>
              <td class="text-right text-info">$
                <span id="rev-year">
                            449.77                        </span>
              </td>
              <td class="text-right text-danger">$
                <span id="cost-year">
                            120.96                        </span>
              </td>
              <td class="text-right text-success">$
                <span id="earning-year">
                            328.81                        </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

При просмотре на мобильном устройстве эти две таблицы остаются на своих местах и ​​не совпадают друг с другом.

Любые предложения о том, как сделать эти две таблицыотзывчивый?

Я ценю ваши ответы!

1 Ответ

0 голосов
/ 25 июня 2018

Как уже говорилось в комментариях, вам необходимо включить отзывчивые контрольные точки.Вместо использования col-6, вы должны использовать col-md-6 col-sm-12.Если вы добавите это в свой код, он будет использовать размер столбца 12 на небольших устройствах и размер 6 на устройствах среднего размера или выше.

Я добавил точки останова в приведенном ниже фрагменте кода.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
    <div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-sm-12">
      <div class="pr-1">
        <h2>Specifications</h2>
        <table class="table stats">
          <tbody>
            <tr>
              <th>Price :</th>
              <td class=" text-right">
                100 </td>
            </tr>
            <tr>
              <th>Manufacturer:</th>
              <td class=" text-right">
                Gigabyte </td>
            </tr>
            <tr>
              <th>Wattage:</th>
              <td class=" text-right">
                150 </td>
            </tr>
            <tr>
              <th>Product:</th>
              <td class=" text-right">
                Product 1 </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="col-md-6 col-sm-12">
      <div class="pr-1">
        <h2>Earning</h2>
        <table class="table stats">
          <tbody>
          </tbody>
          <thead>
            <tr>
              <th>Period</th>
              <th class="text-right">Rev</th>
              <th class="text-right">Cost</th>
              <th class="text-right">Profit</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Hour</td>
              <td class="text-right text-info">$
                <span id="rev-hour">
                            0.022                        </span>
              </td>
              <td class="text-right text-danger">$
                <span id="cost-hour">
                            0.006                        </span>
              </td>
              <td class="text-right text-success">$
                <span id="earning-hour">
                            0.016                        </span>
              </td>
            </tr>
            <tr>
              <td>Day</td>
              <td class="text-right text-info">$
                <span id="rev-day">
                            1.34                        </span>
              </td>
              <td class="text-right text-danger">$
                <span id="cost-day">
                            0.36                        </span>
              </td>
              <td class="text-right text-success">$
                <span id="earning-day">
                            0.98                        </span>
              </td>
            </tr>
            <tr>
              <td>Week</td>
              <td class="text-right text-info">$
                <span id="rev-week">
                            9.37                        </span>
              </td>
              <td class="text-right text-danger">$
                <span id="cost-week">
                            2.52                        </span>
              </td>
              <td class="text-right text-success">$
                <span id="earning-week">
                            6.85                        </span>
              </td>
            </tr>
            <tr>
              <td>Month</td>
              <td class="text-right text-info">$
                <span id="rev-month">
                            37.48                        </span>
              </td>
              <td class="text-right text-danger">$
                <span id="cost-month">
                            10.08                        </span>
              </td>
              <td class="text-right text-success">$
                <span id="earning-month">
                            27.40                        </span>
              </td>
            </tr>
            <tr>
              <td>Year</td>
              <td class="text-right text-info">$
                <span id="rev-year">
                            449.77                        </span>
              </td>
              <td class="text-right text-danger">$
                <span id="cost-year">
                            120.96                        </span>
              </td>
              <td class="text-right text-success">$
                <span id="earning-year">
                            328.81                        </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...