Twitter Bootstrap，表格包装表格导致表格未对齐

Question

这主要是一个 CSS/HTML 问题，让我有点抓狂，不应该这么复杂...

我正在为我的 CSS 使用 twitter bootstrap 3，并在完全更新的本地 LAMP 堆栈上进行开发，目前主要在 Firefox 中查看。

我有一个包裹表格的表格（不要让我对使用表格感到愤怒，我主要专注于 PHP 并且现在不关心使用 CSS 研究更好的格式除非你当然认为它会100% 解决了这个问题），它基于使用“while”循环的 mysql 查询动态填充来自 PHP 的结果。该表单具有文本输入和选择下拉菜单，使用户能够从数据库中更新/删除信息或用户，每个都在自己的单元格中。这些行是在“while”循环中创建的，但表单和表格是在循环之外开始和结束的（显然）。提交按钮也在循环之后加载，所以它要么在它自己的单元格中结束，要么也在表格之外。

所有这些都通过 Ajax 加载到主页上的 div 中。下面包含的第一页是一个搜索表单，底部有一个名为“结果”的 div。表格/表单应该在“结果”中加载，而是在整个“容器”div 之外加载，该 div 设置了多个级别，包含所有内容。

下一页是表单本身，并在底部包含一个名为“answer”的 div，它仅显示来自表单处理脚本的消息。 （成功、失败、错误等）

我猜这与 bootstrap.css 文件中设置的类有关，可能与 display: inline vs block?我尝试在我的自定义 css 文件中添加一个类，该类将表单设置为内联显示，并将表单包裹在表格周围，但无济于事。 HTML/CSS 不完全是我的强项，所以任何想法都将不胜感激。谢谢！

相关页面的完整 HTML

请注意，因为它包含在 PHP 文件中，所以没有 html、head 或 body 标签，因为它们都是在几层之上创建的。

从数据库中获取结果的搜索页面，格式如下表

<script>

    $(document).ready(function(){
            $("#results").load('edit.forms.php', function (){
            });
        });

        $("#search").submit(function(){

          $.ajax({
                url: 'forms.php',
                type: 'POST',
                data: $("#search").serialize(),         
                success: function(data) {
                $("#results").empty();
                $("#results").append(data);
                }
            });
            return false;       
        });

      </script>

    <div class='col-md-4'>
    </div>
    <div class='col-md-4'>
        <h3>Search for users to edit:</h3> 
            <form method='POST' action='' id='search'>
            <input type='text' name='search' value='$search' />
            <input type='submit' value='Search' />
            <br /><p><i>(Optional)</i>Number of results to show:
            <select name='num' size='1'>
                <option value='5'>5</option>
                <option value='10'>10</option>
                <option value='15'>15</option>
                <option value='all'>All</option>
            </select></p>
            </form>
        <p>You can search by <i>name, family, class, committee, 
        phone number,</i> etc..</p>
    </div>
    <div class='col-md-4'></div>        

    <div class='row memdb' id='results'></div>

包含表单的页面，以及对齐问题

<script>

$("#editUsers").submit(function(){

$.ajax({
url: 'file.php',
type: 'POST',
data: $("#editUsers").serialize(),
success: function(data) {
$("#answer").empty();
$("#answer").append(data);
}
});
return false;
});     
</script>

<form method='POST' action='' id='editUsers'>
<table>                 
 <tr>            
    <th class='col-sm-2'>Name</th>
    <th class='col-sm-1'>Family</th>
    <th class='col-sm-2'>Position</th>
    <th class='col-sm-2'>Committees</th>
    <th class='col-sm-1'>Class</th>
    <th class='col-sm-2'>Phone</th>
    <th class='col-sm-1'>Email</th>
    <th class='col-sm-1'>Status</th>
 </tr>

A WHILE loop in the PHP file fills in all of the cells with form elements.
Each cell is formatted fine in the loop, and it ends with </td></tr>, then
when the loop is done, it echoes this:

</table>                
<hr class='small-divider'></hr>
<input type='submit' value='Update Records' />
</form>

Screen shot

在上面的屏幕截图中，显然表单应该在搜索框下的 div 中。

Answer 1

clear 重置浮动元素。如果您使用 BT 浮动元素，我会在每行重置浮动后向您推荐，例如

<div class='col-md-4'></div>
<div class='col-md-4'></div>
<div class='col-md-4'></div>
<div style='clear:both'></div> // reset to next row
<div class='col-md-4'></div>
<div class='col-md-4'></div>
<div class='col-md-4'></div>

both - 左侧或右侧都不允许浮动元素

W3C clear reference

伙计，css 是一种魔法 =)