Как добавить место на веб-странице? - PullRequest
Новая
       3

Как добавить место на веб-странице?

0 голосов
/ 09 января 2019

Я пытаюсь сделать веб-страницу резюме. Я использую Bootstrap 4, чтобы помочь мне с адаптивным дизайном. Я борюсь с разнесением различных складных (div) элементов.

Я посмотрел некоторые ресурсы на w3schools. Я увидел, что могу использовать HTML-тег br для создания новой строки в абзаце. Однако это не добавляет новую строку (пробел) между различными элементами.

Вот мой код 

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <p></p>
  <p>Some text here. </p>
</div>

</body>
</html>

В настоящее время я использую пустой тег p (см. Выше), чтобы добавить пробел между сворачиваемым элементом и следующим элементом. Однако есть ли другой способ добавить место? Или этот метод не зависит от области просмотра / устройства?

Ответы [ 5 ]

0 голосов
/ 09 января 2019

Я всегда использую <br />. Вам нужно использовать несколько (около 3 или 4), чтобы получить пробел между элементами.

0 голосов
/ 09 января 2019

Вы также можете заменить пустой тег

на тег
разрыва строки 

<div class="container">
  <button type="button" 
          class="btn btn-primary" 
          data-toggle="collapse" 
          data-target="#demo">
    Simple collapsible
  </button>
  <div id="demo" class="collapse">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <br>
  <p>Some text here. </p>
</div>
0 голосов
/ 09 января 2019

Добавить пользовательский CSS к документу 

<style>
#demo{
     margin-bottom: 20px;
}
</style>
0 голосов
/ 09 января 2019

Итак, во-первых, здорово, что вы изучаете HTML.

проблемы, которые я вижу в вашем коде:

div # demo используется для переноса текста, см. div docs . Поэтому div следует использовать для разметки контента, если вам нужна обертка текста, используйте p (блок) span (inline), есть и другие, но они являются основными.

Если вы отметите Browser DefaultValues ​​, вы увидите, что у тега p есть поле, которого вам не хватает в # demo.

Итак, самое простое, что нужно сделать, это добавить p вокруг первого абзаца 

<div id="demo" class="collapse">
  <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p>Some text here. </p>
<div>
0 голосов
/ 09 января 2019

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

Пример:

Изменение 

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">

до 

<button type="button" class="btn btn-primary mb-3" data-toggle="collapse" data-target="#demo">

Обратите внимание, что я добавил класс mb-3 к кнопке? Это добавляет расстояние под ним.

Вы можете узнать больше об утилитах для разметки загрузчика здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...