如何解决当导航选项卡被其他 div 阻止时，如何使导航选项卡全宽？
我正在使用实体框架构建一个 ASP.NET Web 应用程序，但我被困在 nav-tabs 中，因为我无法沿窗口宽度水平拉直它们。其他 divs 继续挡路。我尝试使用许多 <br/> 并设法使下潜，但 nav-tab 仍然没有定位。我已经附上了代码片段，但我想一定有错误，我无法让它看起来像我在我的机器上看到的那样。您可以编辑它以使其看起来更好并回答问题吗？
src = "~/Scripts/jquery-3.4.1.min.js"
src = "~/Scripts/bootstrap.min.js"
src = "assets/js/jquery.metisMenu.js"
src = "assets/js/custom.js"
src="~/Scripts/modernizr-2.8.3.js"<link href="assets/css/bootstrap.css" rel="stylesheet" />
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<link href="assets/css/custom.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' /><body>
<div id="page-wrapper">
<div id="page-inner">
<div>
<h2>Dashboard</h2>
</div>
<div class="col-md-4">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active">
<a href="#home" data-toggle="tab">Home</a>
</li>
<li class="">
<a href="#contacts" data-toggle="tab">Contacts</a>
</li>
<li class="">
<a href="#socials" data-toggle="tab">Social Media Accounts</a>
</li>
<li class="">
<a href="#emergency" data-toggle="tab">Emergency Contacts Info</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="home">
<h4>Home Tab</h4>
<p>
Lorem ipsum dolor sit amet,consectetur adipisicing elit eserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,consectetur adipisicing elit eserunt
mollit anim id est laborum.
</p>
</div>
<div class="tab-pane fade" id="contacts">
<h4>Profile Tab</h4>
<p>
Lorem ipsum dolor sit amet,consectetur adipisicing elit eserunt
mollit anim id est laborum.
</p>
</div>
<div class="tab-pane fade" id="socials">
<h4>Profile Tab</h4>
<p>
Lorem ipsum dolor sit amet,consectetur adipisicing elit eserunt
mollit anim id est laborum.
</p>
</div>
<div class="tab-pane fade" id="emergency">
<h4>Messages Tab</h4>
<p>
Lorem ipsum dolor sit amet,consectetur adipisicing elit eserunt
mollit anim id est laborum.
</p>
</div>
</div>
</div>
<hr />
<div>
<div class="col-md-3 col-sm-3 col-xs-6">
<h5>Widget Box One</h5>
<div class="panel panel-primary text-center no-boder bg-color-blue">
<div class="panel-body">
<i class="fa fa-bar-chart-o fa-5x"></i>
<h3>120 GB </h3>
</div>
<div class="panel-footer back-footer-blue">
disk Space Available
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<h5>Widget Box Two</h5>
<div class="alert alert-info text-center">
<i class="fa fa-desktop fa-5x"></i>
<h3>100$ </h3>
Lorem ipsum dolor sit amet,consectetur adipisicing elit.
</div>
</div>
<div class="col-md-6">
<h5>Buttons Samples</h5>
<a href="#" class="btn btn-default">default</a>
<a href="#" class="btn btn-primary">primary</a>
<a href="#" class="btn btn-danger">danger</a>
<a href="#" class="btn btn-success">success</a>
<a href="#" class="btn btn-info">info</a>
<a href="#" class="btn btn-warning">warning</a>
<br />
<br />
<h5>Progressbar Samples</h5>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valueNow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valueNow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</div>
<!-- /. ROW -->
<hr />
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Text Input Example</label>
<asp:TextBox ID="TextBox1" runat="server" class="form-control"></asp:TextBox>
<p class="help-block">Help text here.</p>
</div>
</div>
<div class="col-md-4">
<label>Click to see blank page</label>
<a href="blank.aspx" target="_blank" class="btn btn-danger btn-lg btn-block">BLANK PAGE</a>
</div>
<div class="col-md-4">
For More Examples Please visit official bootstrap website <a href="http://getbootstrap.com" target="_blank">getbootstrap.com</a>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-6">
<h5>Table Sample One</h5>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>otto</td>
<td>mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>fat</td>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>otto</td>
<td>mdo</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<h5>Table Sample Two</h5>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>Mark</td>
<td>otto</td>
<td>mdo</td>
</tr>
<tr class="info">
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>fat</td>
</tr>
<tr class="warning">
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>twitter</td>
</tr>
<tr class="danger">
<td>4</td>
<td>John</td>
<td>Smith</td>
<td>jsmith</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- /. ROW -->
<hr />
<div class="row">
<div class="col-md-4">
<h5>Panel Sample</h5>
<div class="panel panel-primary">
<div class="panel-heading">
Default Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing,posuere lectus et,fringilla augue.</p>
</div>
<div class="panel-footer">
Panel Footer
</div>
</div>
</div>
<div class="col-md-4">
<h5>Accordion Sample</h5>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapSEOne" class="collapsed">Collapsible Group Item #1</a>
</h4>
</div>
<div id="collapSEOne" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse in" style="height: auto;">
<div class="panel-body">
Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed">Collapsible Group Item #3</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt.
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<h5>Tabs Sample</h5>
<ul class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">Home</a>
</li>
<li class="">
<a href="#profile" data-toggle="tab">Profile</a>
</li>
<li class="">
<a href="#messages" data-toggle="tab">Messages</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="home">
<h4>Home Tab</h4>
<p>
Lorem ipsum dolor sit amet,consectetur adipisicing elit eserunt
mollit anim id est laborum.
</p>
</div>
<div class="tab-pane fade" id="profile">
<h4>Profile Tab</h4>
<p>
Lorem ipsum dolor sit amet,consectetur adipisicing elit eserunt
mollit anim id est laborum.
</p>
</div>
<div class="tab-pane fade" id="messages">
<h4>Messages Tab</h4>
<p>
Lorem ipsum dolor sit amet,consectetur adipisicing elit eserunt
mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
<!-- /. ROW -->
<hr />
<div class="row">
<div class="col-md-12">
<h5>information</h5>
This is a type of bare admin that means you can customize your own admin using this admin structured template . For More Examples of bootstrap elements or components please visit official bootstrap website <a href="http://getbootstrap.com" target="_blank">getbootstrap.com</a> . And if you want full template please download <a href="http://www.binarytheme.com/bootstrap-free-admin-dashboard-template/" target="_blank">FREE BCORE ADMIN </a> , <a href="http://www.binarytheme.com/free-bootstrap-admin-template-siminta/"
target="_blank">FREE SIMINTA ADMIN</a> and <a href="http://binarycart.com/" target="_blank">FREE BINARY ADMIN</a>.
</div>
</div>
<!-- /. ROW -->
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
</body>解决方法
您使用的 class="col-md-4" 代表页面宽度的三分之一
您可以将其设为 12 全宽，如下所示：
<body>
<div id="page-wrapper">
<div id="page-inner">
<div>
<h2>Dashboard</h2>
</div>
<div class="col-md-12">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active">
<a href="#home" data-toggle="tab">Home</a>
</li>
<li class="">
<a href="#contacts" data-toggle="tab">Contacts</a>
</li>
<li class="">
<a href="#socials" data-toggle="tab">Social Media Accounts</a>
</li>
<li class="">
<a href="#emergency" data-toggle="tab">Emergency Contacts Info</a>
</li>
</ul>
....
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
