как сделать колонку boostrap4 подходящей для ее содержимого

Question

у меня ниже контейнера с двумя рядами. первая строка является заголовком, а вторая строка имеет левую панель навигации и основное содержимое справа.

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

        <div class="row h-100">
            <div
              class="col-12 w-100  sticky-header"
              style="background-color: darkgrey;"
            >
              <h1>This is top header<h1/>
            </div>

            <div class="col-2">
              <div class="fixed-box col-2">
                <h1>SideNavBar</h1>
                <ul>

            <li>
                  <router-link class="nav-link" to="/contacts">
                    <img :src="ContactsImage"  />
                    <span>Contacts</span>
                  </router-link>
                </li>
              <li>
                  <router-link class="nav-link" to="/home">
                    <img :src="HomeImage"  />
                    <span>Home</span>
                  </router-link>
              </li>
              <li>
                  <router-link class="nav-link" to="/help">
                    <img :src="HelpImage"  />
                    <span>Help</span>
                  </router-link>
              </li>

                </ul>
              </div>
            </div>
            <div class="col-10 bg-warning h-100 no-gutters">
              <p>This is main content you see when you click a link on left<p/>
            </div>
          </div>
        </div>
    </div>

     @media only screen and (max-width: 768px) {
        .sidenavbar span {
          display: none;
        }

        .sidenav {
          width: 75px !important;
        }

      }

     .sidenav {
          width: 150px !important;
      }

Я мог бы достичь желаемой функциональности, используя стиль css, чтобы применить другую ширину для столбца боковой панели навигации. Но он оставляет столбец 2 с пробелом, не используемым боковой навигацией. Есть ли способ заставить col-2 сжиматься до размеров его содержимого. И сделать основной контент col-10, чтобы заняться.

Answer 1

В bootstrap 4 вы можете добавить отзывчивые классы, такие как d-none, d-md-none et c. https://getbootstrap.com/docs/4.0/utilities/display/

Это позволит скрыть <span></span>, содержащий текст, на мобильных устройствах.

Вот пример кода https://www.codeply.com/p/taMk8vmbJl

На мобильном устройстве он будет скрывать элемент <span> и отображать только значки.

Также, изменив col-10 на col-md-10, он будет отображать содержимое в разделе «SideNavBar» на мобильном телефоне.