Бульма столбцы не работают, как их исправить? - PullRequest
Новая
       39

Бульма столбцы не работают, как их исправить?

0 голосов
/ 09 ноября 2018

Я пытаюсь создать сайт Bulma.

Чтобы показать и поделиться с вами, рассмотрите следующий код. 

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Some App</title>
		<link rel="stylesheet" href="css/mystyles.css">
	</head>

	<body>
		<nav class="navbar" role="navigation" aria-label="main navigation">
			<div class="navbar-brand">
				<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
					<span></span>
					<span></span>
					<span></span>
				</a>
			</div>
			<div class="navbar-menu">
				<div class="navbar-start">
				</div>
				<div class="navbar-end">
					<a class="navbar-item has-text-centered">Home</a>
					<a class="navbar-item has-text-centered">Blah</a>
					<a class="navbar-item has-text-centered">Blah</a>
					<a class="navbar-item has-text-centered">Blah</a>
					<a class="navbar-item has-text-centered">Blah</a>
				</div>
			</div>
		</nav>
		
		<section class="section">

			<div class="container" style="border: 3px solid red">
				<div class="columns is-centered">
					<div class="column" style="border: 3px solid purple">Auto</div>
					<div class="column" style="border: 3px solid yellow">Auto</div>
					<div class="column is-two-thirds" style="border: 3px solid green">is-two-thirds</div>
				</div>
			</div>

		</section>

		<script type="text/javascript" src="js/index.js"></script>
	</body>
</html>

Когда дело доходит до этих столбцов, они, кажется, не работают. Интересно, что я пропустил по пути.

Я хочу, чтобы три столбца были тремя фактическими столбцами с некоторой высотой и некоторым расстоянием между собой. Однако они «сложены».

Как мне заставить их вести себя как настоящие колонны?

1 Ответ

0 голосов
/ 09 ноября 2018

Вы не включили CSS-файл Булмы в код. Вот почему он не применяет свойства CSS. Код ниже работал для меня отлично. Я только добавил ссылку CDN на css * 1001 Булмы 

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Some App</title>
		<link rel="stylesheet" href="css/mystyles.css">
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
	</head>

	<body>
		<nav class="navbar" role="navigation" aria-label="main navigation">
			<div class="navbar-brand">
				<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
					<span></span>
					<span></span>
					<span></span>
				</a>
			</div>
			<div class="navbar-menu">
				<div class="navbar-start">
				</div>
				<div class="navbar-end">
					<a class="navbar-item has-text-centered">Home</a>
					<a class="navbar-item has-text-centered">Blah</a>
					<a class="navbar-item has-text-centered">Blah</a>
					<a class="navbar-item has-text-centered">Blah</a>
					<a class="navbar-item has-text-centered">Blah</a>
				</div>
			</div>
		</nav>
		
		<section class="section">

			<div class="container" style="border: 3px solid red">
				<div class="columns is-centered">
					<div class="column" style="border: 3px solid purple">Auto</div>
					<div class="column" style="border: 3px solid yellow">Auto</div>
					<div class="column is-two-thirds" style="border: 3px solid green">is-two-thirds</div>
				</div>
			</div>

		</section>

		<script type="text/javascript" src="js/index.js"></script>
	</body>
</html>
...