如何使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 样式为侧导航栏列应用不同的宽度来实现所需的功能。但它忽略了 col-2 的空间，侧导航没有使用。有没有办法让 col-2 缩小到其内容的大小。并使主要内容col-10占据。

Answer 1

在 bootstrap 4 中，您可以添加响应式类，例如 d-none、d-md-none 等。 https://getbootstrap.com/docs/4.0/utilities/display/

这将在移动设备上隐藏包含文本的<span></span>。

这是一个代码示例https://www.codeply.com/p/taMk8vmbJl

在移动设备上，它将隐藏 <span> 元素并仅显示图标。

另外，通过将col-10 更改为col-md-10，它会在移动设备上的“SideNavBar”下显示内容。