Я написал col-md в своем коде, но я хочу, как написать для маленького устройства и большого устройства

Question

Я хочу знать, как написать код для кода устройства смартфона col-sm и точно знаю, что я написал только для настольного компьютера, пожалуйста, проверьте, что я также не уверен в своем кодировании, теперь я только изучаю начальную загрузку, я новичокв систему сетки и первый сайт в начальной загрузке, может ли кто-нибудь мне помочь, я всегда хочу знать на практическом опыте.

<div class="container">
    <div class="row">
    <div class="col-md-8">
    <h3 class="title t-left">About <span>Lotus Interior</span></h3>
    <p style="text-align:justify; line-height:22px;">Lotus Value exemplifies purity and integrity. The symbolism guides us to be committed and transparent in all our dealings and adhere to timely delivery, ontime, each time,uncompromising on business ethics.We remain firmly committed towards creating urban living spaces where people can live,</p>
    </div> 
    <div class="col-md-4" style="padding-top:25px;">
    <img src="banner/banner5.jpg" alt="worker" class="img-responsive">
    </div> 
    </div>
    </div>


    <div class="container">
    <div class="row">
    <div class="col-md-3"><img src="row/1.jpg"/></div>
    <div class="col-md-3"> <img src="row/2.jpg"/></div>
    <div class="col-md-3"><img src="row/3.jpg"/></div>
    <div class="col-md-3"> <img src="row/4.jpg"/></div>
    </div>
    </div>

выходное изображение введите описание изображения здесь

Answer 1

Это зависит от того, насколько велики ваши изображения и сколько вы хотели бы видеть рядом друг с другом.

На мобильном устройстве у вас не так много экрана, поэтому у вас 4 изображения рядом сдруг с другом в одном ряду будет слишком широко на мобильном устройстве.Я бы порекомендовал вам перечислить их каждый 1 для мобильных устройств, чтобы вы могли изменить свой код следующим образом:

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-3"><img src="row/1.jpg"/></div>
        <div class="col-sm-12 col-md-3"><img src="row/2.jpg"/></div>
        <div class="col-sm-12 col-md-3"><img src="row/3.jpg"/></div>
        <div class="col-sm-12 col-md-3"><img src="row/4.jpg"/></div>
    </div>
</div>

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

Ниже приведен пример кода для размеров экрана для малого, среднего и большого:

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-3"><img src="row/1.jpg"/></div>
        <div class="col-sm-12 col-md-6 col-lg-3"><img src="row/2.jpg"/></div>
        <div class="col-sm-12 col-md-6 col-lg-3"><img src="row/3.jpg"/></div>
        <div class="col-sm-12 col-md-6 col-lg-3"><img src="row/4.jpg"/></div>
    </div>
</div>

• На больших устройствах (настольных ПК): 4 изображения рядом друг с другом.
• На средних устройствах (планшетах): 2 изображения рядом друг с другом, а два других под ними.
• На небольших устройствах (моб.): 1 изображение с остальными под

Попробуйте следующий код, он создает адаптивную сетку изображений из URL-адреса, который вы указали в качестве примера:

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-3">
            <img class="img-responsive" style="margin-top: 10px; min-width: 100%" src="row/1.jpg"> 
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <img class="img-responsive" style="margin-top: 10px; min-width: 100%" src="row/2.jpg"> 
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <img class="img-responsive" style="margin-top: 10px; min-width: 100%" src="row/3.jpg"> 
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <img class="img-responsive" style="margin-top: 10px; min-width: 100%" src="row/4.jpg"> 
        </div>
    </div>
</div>

Answer 2

Для небольших устройств это col-sm, а для больших устройств - col-sm, и проверьте документацию, там есть все !!