Question

我试图将一个div放在Bootstrap 4中垂直导航的右侧，但没有成功：

<div class="container mt-3">
  <div class="nav navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Some cool thing</a>
    <button class="navbar-toggler" type="button"
            data-toggle="collapse" data-target="#my-navbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="my-navbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="nav-link">Some menu entry</a>
        </li>
      </ul>
    </div>
  </div><!-- end of .nav -->

  <div class="row mt-2">
    <div class="nav flex-column nav-pills col-md-5">
      <a href="#" class="nav-link active">Something</a>
    </div>
    <div class="col-md-7 border">
      <h1>Hello world</h1>
    </div>
  </div>
</div>

然而，nav和右边的div（边框几乎看不见）比它们应该延伸得更远，并且比顶部的导航栏更宽：

Here是一个CodePen，用于演示此问题。有没有办法使用内置的Bootstrap类？如果没有，我该如何手动修复？

如果我不使用<div class="row">并将组件放入<div class="container">，则边界是正确的，但它们不再是连续的，而是在彼此之下。

Answer 1

在顶部使用navbar代替nav。第二个导航也应该在col内（而不是列本身）。

https://www.codeply.com/go/Q0lwszuHrv

<div class="container mt-3">
    <div class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Some cool thing</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#my-navbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="my-navbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Some menu entry</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- end of .nav -->

    <div class="row mt-2">
        <div class="col-md-5">
            <div class="nav flex-column nav-pills">
                <a href="#" class="nav-link active">Something</a>
            </div>
        </div>
        <div class="col-md-7 border">
            <h1>Hello world</h1>
        </div>
    </div>
</div>

Answer 2

在Bootstrap中，您应该在.container内放置.nav ，而不是在.nav之外。这允许<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css"> <div class="nav navbar-expand-lg navbar-dark bg-dark"> <div class="container mt-3"> <a class="navbar-brand" href="#">Some cool thing</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#my-navbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="my-navbar"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">Some menu entry</a> </li> </ul> </div> </div> </div>  <div class="container mt-3"> <div class="row mt-2"> <div class="nav flex-column nav-pills col-md-5"> <a href="#" class="nav-link active">Something</a> </div> <div class="col-md-7 border"> <h1>Hello world</h1> </div> </div> </div>为全宽。然后使用第二个容器来完成后续工作。

＆＃13;
＆＃13;
<institution> <id>83812745840</id> <code>2701811200</code> <full_name>full name 1</full_name> <address>adress 1</address> <institution_type> <id>191</id> <code>inst code 1</code> <name>institution name1</name> </institution_type> <place> <id>812007638</id> <name>place-name_1</name> <code>415995</code></place> <activity> <code>811855905</code> <name>act-name-1</name> <equipment_specialty>false</equipment_specialty> </activity> </institution>
＆＃13;
＆＃13;
＆＃13;

在Bootstrap 4中的垂直导航旁边放置div

2 个答案: