Как создать отзывчивый HTML на мобильном с bootstrap? - PullRequest
Новая
       4

Как создать отзывчивый HTML на мобильном с bootstrap?

0 голосов
/ 10 января 2020

Я использую Bootstrap v4.3; мой рабочий стол выглядит так:

enter image description here

Но в мобильном представлении это выглядит так, но я хочу, чтобы оно выглядело как черный прямоугольник. enter image description here

<td>
    <table style="border-style: solid;" class="table-bordered">
        <thead>
            <center>
                <h4>STACKOVERFLOW</h4>
            </center>
            <tr>
                <td colspan="2" class="p-2 mb-2 bg-warning text-dark" style="font-family:'Tahoma'" align="center">
                    <h4><small>ACTUAL MONTH PERFORMANCE</small></h4></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align="center" class="p-1 mb-2 text-dark" style="background-color: #e8e5e1; font-family:'Tahoma'">TODAY</th>
                    <td align="center" class="p-1 mb-2 text-dark" style="background-color: #e8e5e1; font-family:'Tahoma'">STATUS</td>
            </tr>
            <tr>
                <td align="center" class="p-2 mb-2 text-dark" style=" font-family:'Tahoma'">%88.89</td>
                <td align="center" class="p-2 mb-2 text-dark" style=" font-family:'Tahoma'"><img src="X.gif" height="40" width="40"></td>
            </tr>
        </tbody>
    </table>
</td>

Ответы [ 2 ]

1 голос
/ 10 января 2020

Bootstrap делит экран на 12 равных частей, так что вы можете сделать это 

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">...</div>

Это означает, что col-lg-3 создаст 4 одинаковых элемента в строке. Coll-md-3 будет делать то же самое. -sm-6 создаст 2 одинаковых элемента в строке, а col-xs-12 создаст 1 элемент в строке

0 голосов
/ 10 января 2020

поместите ваш контент в строку, а затем присвойте каждому ящику этот класс: 

<div class="col-md-3 col-sm-12">

   <!-- content here -->

</div>

. При этом ширина каждого ящика будет равна 25% на экранах среднего размера, но при преобразовании будет преобразована в 100% родительского. экран становится меньше.

...