How to change navbar-item width in bootstrap 4

Question

I have a problem with this bootstrap navbar. I want when the button is clicked, the content (Collapsed content) is displayed but not in width as is it navbar(full-width), but how long width it really is. If anyone has any suggestion how to do it?

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

img

Answer 1

You can add a fit-width class to your collapsible section with fit-content style.

<div class="pos-f-t">
  <div class="collapse fit-width" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

The css style:

.fit-width {
    width: fit-content;
}

** If you need to change the size of the whole navbar, you can put the class in topest div next to the pos-ft class.