Bootstrap v3.3.7 col проблема с накоплением на MD? - PullRequest
Новая
       24

Bootstrap v3.3.7 col проблема с накоплением на MD?

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

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

Это знак погоды для моего сайта, он имеет ширину col-sm-4, поэтому будет отображаться на мобильном устройстве (MD).

Weather Badge

При просмотре страницы на MD все столбцы накладываются друг на друга. Думал, что размер будет означать, что они будут встроены?

MD view of page

<div class="col-sm-4">
    <h3>Weather</h3>
    <span class="h5">Sunday at 6:48pm</span> <small>(Dust)</small>
    <div>
        <img src="img/wn/50.png"/>
        <span class="display-3">23°C</span>
    </div>
    <hr class="new1">
    <div class="row">
        <div class="col-sm-4">
            <p class="text-center">Wind: 6.7m/s<br>
            Direction: ENE</p>
        </div>
        <div class="col-sm-4">
            <p class="text-center">Pressure: 1016hPA</p>
        </div>
        <div class="col-sm-4">
            <p class="text-center">Cloudy<br>
            25%
            </p>
        </div>
    </div>
    <div class="row text-center">
        <div class="col-sm-4">
            <p class="text-center">Min — Max<br>
            23°C — 23°C
            </p>
        </div>
        <div class="col-sm-4">
            <p class="text-center">Sunrise<br>
            07:00
            </p>
        </div>
        <div class="col-sm-4">
            <p class="text-center">Sunset<br>
            18:15
            </p>
        </div>
    </div>
</div> 
<!-- end col 1 -->
<div class="col-sm-8">
</div> 
<!-- end col 2 -->

Любые советы или вопросы замечены?

...