Bootstrap 4 столбца, идущие друг под другом - PullRequest
Новая
       1

Bootstrap 4 столбца, идущие друг под другом

0 голосов
/ 16 июня 2020

Вот мой HTML код: 

<html>
	<head>
		<title>Title</title>
		<meta charset="utf-8">
		<meta name="description" content="description">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
		<link rel="manifest" href="site.webmanifest">
		<link rel="mask-icon" href="safari-pinned-tab.svg" color="#4faf54">
		<meta name="msapplication-TileColor" content="#2b5797">
		<meta name="theme-color" content="#ffffff">
		<link rel="stylesheet" href="style/style.css">
		<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
	</head>
	<body>
		<nav class="navbar navbar-static-top">
			<span class="navbar-brand">Title</span>
		</nav>
		<div class="container">
			<div class="row">
				<div class="col-2">
					<h1>TEST</h1>
				</div>
				<div class="col-2">
					<h1>TEST</h1>
				</div>
				<div class="col-2">
					<h1>TEST</h1>
				</div>
				<div class="col-2">
					<h1>TEST</h1>
				</div>
			</div>
		</div>
	</body>
</html>

Независимо от того, что я делаю, я не могу заставить столбцы оставаться рядом друг с другом, они всегда будут go один под другим.

Я буквально пробовал скопировать, вставив пример системы сеток из документации, и это тоже не сработало.

Я использую последнюю версию Firefox для Ma c.

Ответы [ 4 ]

2 голосов
/ 16 июня 2020

Из кода ясно, что вы используете версию 3 Bootstrap, но система сетки, которую вы используете, предназначена для Bootstrap 4, в основном BS 3 не имеет такого класса, как col-2 попробуйте использовать col-sm-2 вместо этого или измените версию ресурсов Bootstrap на версию 4, которая использует css flexbox вместо float.

Надеюсь, это поможет!

0 голосов
/ 16 июня 2020

система сеток работала для меня на boostrap версии 3.4.1, просто нужно добавить класс сетки, который делает ее адаптивной:

  • xs (для телефонов - экраны шириной менее 768 пикселей)
  • sm (для планшетов - экраны шириной 768 пикселей или более)
  • md (для маленьких ноутбуков - экраны шириной 992 пикселей или более)
  • lg (для ноутбуков и рабочие столы - экраны шириной 1200 пикселей или более)

например, с классом «col-sm-2» на экране размером более 768 пикселей они будут плавать рядом друг с другом

0 голосов
/ 16 июня 2020 
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="description" content="description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="manifest" href="site.webmanifest">
    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#4faf54">
    <meta name="msapplication-TileColor" content="#2b5797">
    <meta name="theme-color" content="#ffffff">
    <link rel="stylesheet" href="style/style.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


</head>
<body>
    <nav class="navbar navbar-static-top">
        <span class="navbar-brand">Title</span>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-2">
                <h1>TEST</h1>
            </div>
            <div class="col-2">
                <h1>TEST</h1>
            </div>
            <div class="col-2">
                <h1>TEST</h1>
            </div>
            <div class="col-2">
                <h1>TEST</h1>
            </div>
        </div>
    </div>
     <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
</body>

0 голосов
/ 16 июня 2020

Вы используете Bootstrap 3.4.1, и класс col-x не поддерживается в этой версии.

Попробуйте обновить версию Bootstrap до 4: 

<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="description" content="description">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
        <link rel="manifest" href="site.webmanifest">
        <link rel="mask-icon" href="safari-pinned-tab.svg" color="#4faf54">
        <meta name="msapplication-TileColor" content="#2b5797">
        <meta name="theme-color" content="#ffffff">
        <link rel="stylesheet" href="style/style.css">
        <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  </head>
  
    <body>
        <nav class="navbar navbar-static-top">
            <span class="navbar-brand">Title</span>
        </nav>
        <div class="container">
            <div class="row">
                <div class="col-2">
                    <h1>TEST</h1>
                </div>
                <div class="col-2">
                    <h1>TEST</h1>
                </div>
                <div class="col-2">
                    <h1>TEST</h1>
                </div>
                <div class="col-2">
                    <h1>TEST</h1>
                </div>
            </div>
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...