How to responsive bootstrap tab
Question
I'm trying to develop myself just on bootstrap and I wonder that how to create boostrap tab to responsive without plugin and I found a few plugin for tab to responsive but I want to learn how can I make it without plugin?
for example as image (it can be like this)
.myTab{ margin:70px; width:700px; }
<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>
3 answers
solution1
0 ACCPTED 2017-02-03 07:45:24
Don't give any width allow bootstrap to set it or use media queries in css. Alternatively use bootstrap grid like col-lg-12 or something which fits. you can also use .container class which sets the width to 800px and is responsive too.
solution2
0 2017-02-03 07:46:08
What about taking the float left off of the tab items for the size you want to change it
@media screen and (max-width: 767px) {
.nav-tabs>li {
float: none;
}
}
solution3
0 2017-08-02 14:19:38
每次您调整浏览器大小时，我都会在这里创建此code https://jsfiddle.net/zrss7hor/2/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.