【发布时间】：2021-04-08 12:27:25
【问题描述】：
我正在使用 Entity Framework 构建一个 ASP.NET Web 应用程序，但我被困在 nav-tabs 中，因为我无法将它们沿窗口宽度水平拉直。其他divs继续挡路。我尝试使用许多<br/>，但我设法降低了潜水，但nav-tab 仍然没有到位。我已经附上了sn-p，但我想一定有错误，我无法让它看起来像我在我的机器上看到的那样。您可以对其进行编辑以使其看起来更好并回答问题吗？
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. 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. 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="socials">
<h4>Profile 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. 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. 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>
</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, 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="#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, consectetur adipisicing elit, 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. 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="profile">
<h4>Profile 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. 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. 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>
</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>【问题讨论】：
标签： html css asp.net-mvc twitter-bootstrap tabs