Twitter bootstrap 引导中的表对齐不正确
为了尊重台式机、平板电脑和移动设备，我正试图在Bootstrap的帮助下开发一个应用程序 目前，我面临着一个关于表格响应性的问题 下面我提供了截图和代码，请让我知道我在哪里犯了错误 您可以从第二个屏幕截图中看到，第二个屏幕截图与响应性一致，但另一个屏幕截图与响应性不一致 屏幕截图1：：平板电脑上的完美对齐 屏幕截图2:：在手机上不完美 代码：：Twitter bootstrap 引导中的表对齐不正确,twitter-bootstrap,Twitter Bootstrap,为了尊重台式机、平板电脑和移动设备，我正试图在Bootstrap的帮助下开发一个应用程序 目前，我面临着一个关于表格响应性的问题 下面我提供了截图和代码，请让我知道我在哪里犯了错误 您可以从第二个屏幕截图中看到，第二个屏幕截图与响应性一致，但另一个屏幕截图与响应性不一致 屏幕截图1：：平板电脑上的完美对齐 屏幕截图2:：在手机上不完美 代码：： <!DOCTYPE html> <html lang="en"> <head> <meta
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Fixed Top Navbar Example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="js/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="js/libs/bootstrap/customcss/navbar-fixed-top.css" rel="stylesheet">
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project Title</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Mission <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Request <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<!--li class="active"><a href="./">Fixed top</a></li -->
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Project Title</h1>
<p></p>
<p></p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<div class="col-md-12">
<table class="table table-bordered table-condensed files" border="1">
<thead>
<tr>
<th>Emp Id</th>
<th>Emp Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Days</th>
<th>Status</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456</td>
<td>Employee First & Last Name</td>
<td>04/DEC/14</td>
<td>30/JAN/15</td>
<td>35</td>
<td>
<button type="button" class="btn btn-success">
<i class="glyphicon glyphicon-ok-sign"></i>
<span>Validated</span>
</button>
</td>
<td>
<button type="button" class="btn btn-warning">
<i class="glyphicon glyphicon-question-sign"></i>
<span>Pending</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/libs/jQuery/js/jquery-2.0.3.js"></script>
<script src="js/libs/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
用于引导的固定顶部导航栏示例
切换导航
-
- 导航标题
-
- 导航标题
项目名称
小组标题
Emp Id
Emp名称
开始日期
结束日期
天
地位
地位
123456
员工姓名
2014年12月4日
2015年1月30日
35
验证
悬而未决的
项目名称
小组标题
一行
名字
姓
电子邮件
传记
1.
约翰
卡特
johncarter@mail.com
悬而未决的
2.
彼得
帕克
peterparker@mail.com
悬而未决的
3.
约翰
兰博
johnrambo@mail.com
悬而未决的
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Project Title</h1>
<p></p>
<p></p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Biography</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
<td>
<button type="button" class="btn btn-warning">
<i class="glyphicon glyphicon-question-sign"></i>
<span>Pending</span>
</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
<td>
<button type="button" class="btn btn-warning">
<i class="glyphicon glyphicon-question-sign"></i>
<span>Pending</span>
</button>
</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
<td>
<button type="button" class="btn btn-warning">
<i class="glyphicon glyphicon-question-sign"></i>
<span>Pending</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>