Блог

Главная - Вопросы по программированию - Начальная загрузка 4, CSS — Скрытие текста в меню вкладок

Начальная загрузка 4, CSS — Скрытие текста в меню вкладок

#html #css #twitter-bootstrap #bootstrap-4

Вопрос:

У меня есть проблема с CSS, скрывающая текст в моем боковом меню, и я оставляю потрясающие значки шрифтов в мобильном представлении, и я не могу придумать никакого разумного решения. Я использую bootstrap 4

Затем код моего бокового меню

 <div class="sidebar">
  <a class="active" href="#Link0"><i class="fas fa-walking"></i> Link0</a>
  <a href="#link1"><i class="fas fa-users"></i> Link1</a>
  <a href="#link2"><i class="fas fa-cog"></i> Link2</a>
  <a href="#link3"><i class="fas fa-headset"></i> Link3</a>
</div>

Согласно руководству по начальной загрузке, я должен быть в состоянии скрыть любой элемент между любым подходящим тегом class="d-SM-none d-MD-block" . Моя проблема в том, что я хочу, чтобы значок слева оставался видимым для мобильного просмотра и скрывал текст, но когда я помещаю текст между <div> тегами, текст всегда появляется на одну строку ниже значка. Я попробовал <i> <p> теги и все та же проблема, и, кстати, текст все равно не скрывается 😀
Любая помощь приветствуется!

Что я пробовал и не получилось:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

<div class="sidebar">
  <a class="active" href="#Link0"><i class="fas fa-walking"></i> <div class="d-sm-none d-md-block">Link0</div></a><!--Text is one line down from icon-->
  <a href="#link1"><i class="fas fa-users"></i><p class="d-sm-none d-md-block"> Link1</p></a><!--Text is one line down from icon-->
  <a href="#link2"><i class="fas fa-cog"></i> Link2</a>
  <a href="#link3"><i class="fas fa-headset"></i> Link3</a>
</div>

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

1. Извините, это немного сбивает с толку, так как мой английский не очень хорош… основная идея состоит в том, чтобы держать значок и текст рядом друг с другом, как и другие ссылки 2 и 3. это главная проблема

Ответ №1:

Скрытая часть работает нормально, проблема в том, что вы пытаетесь добавить некоторые элементы, которые отображаются по умолчанию с помощью блока ( div , p ), поэтому замените их на span .

Тогда не используйте класс d-md-block , в a котором вы находитесь, по умолчанию display: inline . Поэтому вам следует использовать класс d-md-inline .

Результат:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

<div class="sidebar">
  <a class="active" href="#Link0"><i class="fas fa-walking"></i> <span class="d-sm-none d-md-inline">Link0</span></a><!--Text is one line down from icon-->
  <a href="#link1"><i class="fas fa-users"></i><span class="d-sm-none d-md-inline"> Link1</span></a><!--Text is one line down from icon-->
  <a href="#link2"><i class="fas fa-cog"></i> Link2</a>
  <a href="#link3"><i class="fas fa-headset"></i> Link3</a>
</div>
Метки: ,