как заблокировать строку в начальной загрузке 4?

Question

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

Заранее спасибо.

    <div class="container">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner" role="listbox">
                <!-- slider 1 -->
                        <div class="carousel-item active">
                            <div class="row">
                                <div class="col-md-3 col-sm-3 col-xs-3">
                                        <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
                                    </div>
                                <div class="col-md-3 col-sm-3 col-xs-3">
                                        <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
                                    </div>
                                <div class="col-md-3 col-sm-3 col-xs-3">
                                        <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
                                    </div>
                                <div class="col-md-3 col-sm-3 col-xs-3">
                                        <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
                                    </div>
                            </div>
                        </div>
<!-- slider 2 -->
                        <div class="carousel-item">
                                <div class="row">
                                    <div class="col-md-3 col-sm-3 col-xs-3">
                                            <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
                                    </div>
                                    <div class="col-md-3 col-sm-3 col-xs-3">
                                            <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
                                    </div>
                                    <div class="col-md-3 col-sm-3 col-xs-3">
                                            <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
                                    </div>
                                    <div class="col-md-3 col-sm-3 col-xs-3">
                                            <span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>

                                    </div>
                                </div>
                            </div>

                </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

css:

.carousel-item span img {
     height:200px !important;

}

Answer 1

Для Bootstrap 4 у вас есть новый тег col-

Так что вам нужно использовать col-3 вместо указания col-xs-3 для ваших divs
(Обратите внимание, что указание col- автоматическиустанавливает sm, xs, lg равными значениям ширины, если вы не укажете другой класс для sm / xs / lg)

jsfiddle: https://jsfiddle.net/as6md81b/16/

См. https://getbootstrap.com/docs/4.0/layout/grid/