Html 选项卡显示被扭曲，显示链接而不是选项卡 /div>

您缺少

class=“nav link”

内部

您需要发布cssit的引导4检查向li元素添加导航项目类我已经编辑了代码，即使代码显示的是相同的链接而不是标签

/div>
    <div class="profile_main_column column">
      <ul class="nav nav-tabs" role="tablist" id="profileTabs">
      <li role="presentation" class="active"><a href="#newsfeed_div" aria-controls="newsfeed_div" role="tab" data-toggle="tab">Newsfeed</a></li>
      <li role="presentation"><a href="#messages_div" aria-controls="messages_div" role="tab" data-toggle="tab">Messages</a></li>
    </ul>

    <div class="tab-content">

      <div role="tabpanel" class="tab-pane fade in active" id="newsfeed_div">
        <div class="posts_area"></div>
        <img id="loading" src="assets/images/icons/loading.gif">
      </div>


      <div role="tabpanel" class="tab-pane fade" id="messages_div">
        <?php  
        

          echo "<h4>You and <a href='" . $username ."'>" . $profile_user_obj->getFirstAndLastName() . "</a></h4><hr><br>";

          echo "<div class='loaded_messages' id='scroll_messages'>";
            echo $message_obj->getMessages($username);
          echo "</div>";
        ?>



        <div class="message_post">
          <form action="" method="POST">
              <textarea name='message_body' id='message_textarea' placeholder='Write your message ...'></textarea>
              <input type='submit' name='post_message' class='info' id='message_submit' value='Send'>
          </form>

        </div>

        <script>
          var div = document.getElementById("scroll_messages");
          div.scrollTop = div.scrollHeight;
        </script>
      </div>


    </div>


  </div>

<ul class="nav nav-tabs" role="tablist" id="profileTabs">
    <li role="presentation" class="nav-item active">
        <a class="nav-link" href="#newsfeed_div" aria-controls="newsfeed_div" role="tab" data-toggle="tab">Newsfeed</a>
    </li>
    <li role="presentation" class="nav-item" >
        <a class="nav-link"  href="#messages_div" aria-controls="messages_div" role="tab" data-toggle="tab">Messages</a>
    </li>
</ul>