Question

我试图在bootstrap上开发自己，我想知道如何在没有插件的情况下创建boostrap选项卡，我发现了一些用于响应的插件，但我想学习如何在没有插件的情况下实现它？

例如作为图像（可以像这样）

＆＃13;

.myTab{
  margin:70px;
  width:700px;
}

＆＃13;

<html lang="en">
<head>
  <meta charset="UTF-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  
  <div class="myTab">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      <h2>Home</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo asperiores, architecto sunt ex dignissimos nihil eaque voluptate, iure iusto porro, rem animi odio, amet consequatur saepe nam accusamus perspiciatis deserunt?</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
      <h2>Profile</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam possimus neque suscipit omnis dolore at consequuntur commodi itaque dignissimos quibusdam consectetur officia earum laborum accusantium, corporis quaerat ullam modi repellendus.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
      <h2>Messages</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi inventore dignissimos nisi quisquam sit commodi, laboriosam perspiciatis omnis praesentium voluptate illum magni! Quo, odio itaque recusandae quam veniam tempore cupiditate.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="settings">
      <h2>Settings</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quam illo magni itaque fugit quo aperiam minus officia a, cumque, error, quidem voluptates cupiditate asperiores dolorum necessitatibus commodi culpa dicta.</p>
    </div>
  </div>

</div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

Answer 1

不要给任何宽度允许引导程序设置它或在css中使用媒体查询。或者使用类似col-lg-12的引导网格或适合的东西。你也可以使用.container类，它将宽度设置为800px并且也是响应式的。

Answer 2

如果要将标签项目中的浮动项留下您想要更改它的大小

@media screen and (max-width: 767px) {
    .nav-tabs>li {
        float: none;
    }
}

Answer 3

我在这里创建了这个code https://jsfiddle.net/zrss7hor/2/每次调整浏览器时，标签都会对其进行调整

如何响应bootstrap选项卡

3 个答案: