Блог

Главная - Вопросы по программированию - Моя строка начальной загрузки выходит за пределы ширины страницы при ее изменении?

Моя строка начальной загрузки выходит за пределы ширины страницы при ее изменении?

#html #css #bootstrap-4 #bootstrap-grid

#HTML #css #bootstrap-4 #bootstrap-сетка

Вопрос:

Я очень новичок в Bootstrap и работал над некоторыми учебными пособиями. В настоящее время я пытаюсь перестроить домашнюю страницу Google и столкнулся с некоторыми трудностями с отзывчивостью грид-системы.

Я создал очень простой макет верхней панели на главной странице Google, и он более или менее выглядит нормально, поскольку он полноэкранный; однако, когда я изменяю размер окна, текст с правой стороны растекается по ширине окна.

     <body>
      <div class="container-fluid" id="topbar">
        <div class="row">
          <div class="col-1 justify-content-start aboutlink">
            About
          </div>
          <div class="col-1 justify-content-start">
            Store
          </div>
          <div class="col-8">
          </div>
          <div class="col-1 justify-content-end gmaillink">
            Gmail
          </div>
          <div class="col-1 justify-content-end">
            Images
          </div>
        </div>
      </div>

Вот изображение проблемы:

Окно переполнения текста

Классы «aboutlink» и «gmaillink» просто выравнивают текст по правому краю, а идентификатор верхней панели имеет поле в 15 пикселей и задает размер шрифта.

Я прочитал документацию по адаптивным точкам останова и сеточной системе, но, похоже, не могу решить эту проблему. Был бы признателен, если бы кто-нибудь мог поделиться некоторыми советами?

Спасибо.

Ответ №1:

Что происходит не так?

Если мы добавим границу к столбцам и разрешим переносить слово, если оно не подходит, мы сможем лучше видеть, что происходит.

Взгляните на этот пример, и вы увидите, что на небольших экранах слова не вписываются в col-1 divs, а поскольку слова по умолчанию не переносятся, это приводит к тому, что столбец увеличивается больше, чем должен быть, чтобы соответствовать размеру текста:

 .col-1 {
  overflow-wrap: break-word; border: 1px solid lightgray;
}  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
  <div class="row">
    <div class="col-1 aboutlink">
      About
    </div>
    <div class="col-1">
      Store
    </div>
    <div class="col-8">
    </div>
    <div class="col-1 gmaillink">
      Gmail
    </div>
    <div class="col-1">
      Images
    </div>
  </div>
</div>

1. Точки останова и классы заполнения

Классы сетки начальной загрузки позволяют устанавливать точки останова для столбцов. Так, например, эти классы означают: выделите столбцу 6/12 пространства на экранах до точки останова md (768 пикселей) и 8/12 пространства от 768 пикселей и выше:

 <div class="col-6 col-md-8">

В Bootstrap также есть классы интервалов, которые можно использовать для изменения заполнения столбцов. px-* Классы устанавливают отступы для левого и правого отступов. По умолчанию используется px-3 значение, поэтому мы можем использовать px-1 , чтобы уменьшить отступы, чтобы столбцы того же размера могли вместить больше содержимого.

Пример использования col-sm-* и px-* :

 .row div {border:1px solid lightgray;}  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
  <div class="row">
    <div class="col-2 col-sm-1 aboutlink px-1">
      About
    </div>
    <div class="col-2 col-sm-1 px-1">
      Store
    </div>
    <div class="col-4 col-sm-8">
    </div>
    <div class="col-2 col-sm-1 gmaillink px-1">
      Gmail
    </div>
    <div class="col-2 col-sm-1 px-1">
      Images
    </div>
  </div>
</div>

2. Классы начальной загрузки

Лучшим вариантом в этом случае (поскольку вам не нужна определенная структура) может быть использование col-auto классов начальной загрузки, которые будут использовать только пространство, необходимое для размещения содержимого — это может решить проблему необходимости устанавливать cols в определенной пропорции ширины, например, 1/12 или 2/12.

В приведенном ниже примере мы устанавливаем ширину первых 2 и последних 2 столбцов col-auto , чтобы они изменялись в соответствии с размером текста внутри них, а затем присваиваем среднему столбцу col класс, чтобы занять оставшееся доступное пространство:

 .col-auto{ border:1px solid lightgray;}  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container-fluid" id="topbar">
  <div class="row">
    <div class="col-auto aboutlink px-1">
      Abouttttt
    </div>
    <div class="col-auto px-1">
      Store
    </div>
    <div class="col">
    </div>
    <div class="col-auto gmaillink px-1">
      Gmail
    </div>
    <div class="col-auto px-1">
      Images
    </div>
  </div>
</div>

К вашему СВЕДЕНИЮ: justify-content-* классы предназначены для макетов flexbox и не работают с классами grid, поэтому я удалил их из примеров.

Комментарии:

1. Большое вам спасибо за этот чрезвычайно подробный ответ, я действительно ценю время, которое вы потратили на объяснение всего для меня. Все это имеет большой смысл. Не подумал добавить границу к столбцам, определенно нужно поработать над пониманием того, как лучше устранять эти проблемы — еще раз спасибо, что помогли мне на моем пути! Я буду придерживаться автоклассов, продвигаясь вперед, где это возможно. 🙂

2. @Tjm92 Рад помочь! Выбор правильного класса col зависит от того, что вы хотите — в большинстве случаев классы точек останова, например col-4 col-md-3 , идеальны, особенно если вы пытаетесь создать определенную сеточную структуру, например, галерею изображений или равные текстовые блоки. например. Потребуется время, чтобы ознакомиться со всеми вариантами и изучить, которые наиболее подходят в разных ситуациях. Иногда все может сводиться к пробам и ошибкам 🙂

3. @Tjm92 Кроме того, чтобы все усложнить, у вас также есть CSS-сетки и flexbox! На них тоже стоит обратить внимание, они более гибкие, чем сетки начальной загрузки, но это также означает, что у них больше возможностей, что может немного затруднить изучение гаек и болтов того, как это работает. Может быть, придерживаться Bootstrap, так как это немного более интуитивно понятно для начала, а затем перейти к flexbox, когда вам нужен гибкий, менее сетчатый макет.

4. Спасибо за дополнительные советы, обязательно поиграю с ними в течение следующих нескольких недель — надеюсь, все это скоро станет второй натурой. Я прочитал в нескольких сообщениях, что я должен стараться держаться подальше от загрузочных сеток и вместо этого тратить время на изучение других моделей веб-макета. Но я сделаю так, как вы сказали, и рассмотрю Flexbox в качестве следующего шага. Еще раз спасибо, очень признателен!!!

5. @Tjm92 CSS-сетки, вероятно, заменяют загрузочные сетки, но классы начальной загрузки IMO немного легче изучать, когда вы начинаете, потому что их легче визуализировать и определять… хотя это только мое мнение 🙂