Сетка BootStrap не работает, col-XX-X в одной строке всегда многорядная

Я новичок в начальной загрузке, просто использую "Стартовый шаблон", чтобы увидеть результат сетки, но я не вижу трех столбцов "col-lg-4" в одной строке, прикрепленного кода, я не вижу ошибок скрипта, и разрешение моего дисплея 1280*1024 . Пожалуйста, помогите. большое спасибо.

допустим в один ряд, а в 3 ряд


        <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Bootstrap 101 Template</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>Hello, world!</h1>
    <div class="container">

            <div class="row">

                <div class="col-lg-4" style="border: 1px solid red;">11111</div>
                <div class="col-lg-4" style="border: 1px solid red;">22222</div>
                <div class="col-lg-4" style="border: 1px solid red;">33333</div>

            </div>
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
      </body>
    </html>
Источник

1 ответ

Решение

Код должен предоставить ровно 4 сетки для каждого div точно так, как вы его указали, если размер вашего экрана больше, чем 1200px. В bootstrap-3, который вы используете,lg указывает экран, который больше или равен 1200px. Итак, ваш размер экрана попадает в эту категорию. Рассмотрим свой фрагмент кода ниже -

<div class="row">

    <div class="col-lg-4" style="border: 1px solid red;">11111</div>
    <div class="col-lg-4" style="border: 1px solid red;">22222</div>
    <div class="col-lg-4" style="border: 1px solid red;">33333</div>

</div>
  • Вы использовали <div class="col-lg-4". Это указывает на то, что используйте 4 сетки системы начальных сеток, когда размер экранаlg и 12 сеток во всех остальных случаях (что по умолчанию, если не указано для других размеров экрана).

Вы можете проверить разрешение своего экрана здесь. Убедитесь, что он больше 1200 пикселей. Вы можете запустить программу отсюда. Вы увидите, что, пока размер экрана>= 1200 пикселей, каждый div получает 4 сетки и остается в одной строке.

Если вам нужно 3 сетки для каждого div, и вы не получаете его с помощью col-lg-4, тебе, наверное, стоит попробовать col-md-4, который поместит все блоки в одну строку даже на экране среднего размера (экраны ноутбука: 992–1200 пикселей), и это должно сработать для вас.

Источник
Другие вопросы по тегам