Проблемы с загрузочной сеткой, которая не работает или отображается неправильно

Question

Я столкнулся с сильной головной болью с ошибками boostrap на моей странице, когда дело доходит до сетки. Я знаю, что сделал все, что мог, чтобы понять, и провел бесчисленные часы, пробуя разные вещи, но все безрезультатно. У меня есть следующий код, доставляющий мне проблемы. Если вы хотите проверить сайт в действии, он находится здесь: Пример страницы

<div class="container">
    <div class="row">
        <div class="prodStyles col-xs-12">
            <h2>ALL PRODUCT STYLES</h2>
        </div>
    </div>

<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodImage">
            <img src="images/roll/king-blue.png" alt="cblue" class="alignnone" />
       </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodStyles">
            <ul>
                <li><span>KINGS</span></li>
                <li>1</li>
                <li>2</li>
                <li>3</li>

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

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodImage">
            <img src="/images/roll/king-blue.png" alt="blue" class="alignnone" />
       </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodStyles">
            <ul>
                <li><span>KINGS</span></li>
                <li>1</li>
                <li>2</li>
                <li>3</li>

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

Я смог приблизить его, но он не сломался, где я хотел, для маленьких экранов. Я бы хотел, чтобы он всегда имел ширину не менее 2 столбцов и ширину 4 столбца для средних экранов и выше.

Answer 1

Сетка Bootstrap работает таким образом, что в строке 12 столбцов. И вы делите их как хотите - для двух столбцов вы устанавливаете два div с col-md-6 (для среднего разрешения, следовательно, md). Итак, если вы хотите иметь 2 столбца для маленьких и очень маленьких экранов, 4 столбца для среднего экрана и, скажем, 6 столбцов для большого экрана, ваш код будет выглядеть примерно так:

<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">

Answer 2

Я думаю, вы пропустили закрывающий элемент div после первого элемента col во втором ряду. И имейте 1 дополнительный div закрытия снаружи. попробуйте это:

<div class="container">
<div class="row">
    <div class="prodStyles col-xs-12">
        <h2>ALL PRODUCT STYLES</h2>
    </div>
</div>

<div class="row">

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodImage">
            <img src="images/roll/king-blue.png" alt="cblue" class="alignnone" />
        </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodStyles">
            <ul>
                <li><span>KINGS</span></li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodImage">
            <img src="/images/roll/king-blue.png" alt="blue" class="alignnone" />
        </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
        <div class="prodStyles">
            <ul>
                <li><span>KINGS</span></li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>
</div>

Answer 3

Я думаю, единственное изменение, которое вам нужно сделать, это col-md-6 в col-md-3.

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