Калибровка контейнера в Bulma.io

Я начал изучать Бульму. Я хочу минимизировать размер контейнера (серая область на картинке) по оси x, чтобы я мог встраивать в него элементы. Не могу найти никакого связанного содержимого в документах. Вот мой исходный код:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8" it> 
    <title>Title</title>
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
</head>
<body>
<section class = "hero is-medium">

    <div class = "hero-body has-background-danger">
        <nav class = "navbar has-background-primary">
            <div class = "container has-background-grey-light is-fluid ">
           </div>
        </nav>
    </div>
</section>
</body>
</html>

Это пример представления этого кода: Калибровка контейнера в Bulma.io

html css frontend css-position bulma

29.07.2018 15:14

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

8 666

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете обернуть его в класс column, а затем настроить его размер. (например, is-half)

<!DOCTYPE html>
<html lang = "en">
 <head>
    <meta charset = "UTF-8" it> 
    <title>Title</title>
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
</head>
<body>
<section class = "hero is-medium">
    <div class = "hero-body has-background-danger">
      <div class = "columns is-centered">
       <div class = "column is-half">
         <nav class = "navbar has-background-primary">
            <div class = "container has-background-grey-light is-fluid">
            </div>
         </nav>
       </div>
      </div>
    </div>
</section>
</body>
</html>

Результат: