我现在正尝试从构建布局的表格方式转移到我看到很多争论的 div。我注意到很多人都要求转移到 div。我在 div 中发现的问题例如下面的代码，我指的是模板。我的问题是，在不同的分辨率下，它看起来不同，不像修复大小。例如。在某些分辨率下它很好，而在某些分辨率下它会缩小。确保它保留在我知道的每个分辨率中的最佳解决方案是什么，我知道如果我回到桌面它会起作用，但我想这是不可取的。
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<img alt="Logo" src="img/logo20.png" />
<!-- theme selector starts -->
<div class="btn-group pull-right theme-container" >
<h5>User Name: my demo</h5>
Logout
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<!-- left menu starts -->
<div class="span2 main-menu-span">
<div class="well nav-collapse sidebar-nav">
<ul class="nav nav-tabs nav-stacked main-menu">
<li class="nav-header hidden-tablet">Vtst1</li>
<li><a class="ajax-link" href="test1.php"><i class="icon-home"></i> <span class="hidden-tablet">Test1</span></a></li>
<li><a class="ajax-link" href="test2.php"><i class="icon-eye-open"></i> <span class="hidden-tablet">Test2</span></a></li>
<li class="nav-header hidden-tablet">Admin</li>
<li><a class="ajax-link" href="addM.php"><i class="icon-home"></i> <span class="hidden-tablet">Master</span></a></li>
<li><a class="ajax-link" href="gridU.php"><i class="icon-eye-open"></i> <span class="hidden-tablet">UD</span></a></li>
</ul>
</div><!--/.well -->
</div>
<!--/span-->
<!-- left menu ends -->
<div id="content" class="span10">
<!-- content starts -->
<div>
<ul class="breadcrumb">
<li>
<a href="#">Home</a> <span class="divider">/</span>
</li>
<li>
<a href="#">Forms</a>
</li>
</ul>
</div>
<div class="row-fluid ">
<div class="box span6">
<div class="box-header well" data-original-title>
<h2>Add Master</h2>
</div>
<div class="box-content">
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="selectError3">Master Type</label>
<div class="controls">
<select id="selectError3">
<option>T1</option>
<option>T2</option>
<option>T3</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputSuccess">Master Serial Number</label>
<div class="controls">
<input type="text" id="inputSuccess">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div><!--/span-->
<div class="box span6 ">
<div class="box-header well" data-original-title>
<h2>Active Masters</h2>
</div>
<div class="box-content">
<table class="table table-striped table-bordered datatable">
<thead>
<tr>
<th>No</th>
<th>Master Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="center">T1</td>
<td class="center">T111</td>
<td class="center">
<span class="label label-success">Active</span>
</td>
</tr>
<tr>
<td>1</td>
<td class="center">T1</td>
<td class="center">T112</td>
<td class="center">
<span class="label label-success">Active</span>
</td>
</tr>
</tbody>
</table>
</div>
</div><!--/span-->
</div><!--/row-->
<!-- content ends -->
</div><!--/#content.span10-->
</div><!--/fluid-row-->
最佳答案
如果你想要响应式布局，那么你可以以百分比的形式为你的 div 指定宽度，如果你想要四个 div，那么你可以指定 width:25%;到每个分区 这是获得你想要的东西的最简单方法，或者你也可以转向框架，如 bootstrap 或纯 css...
关于jquery - 保持 div 与 table 具有相同的效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24538407/