Html Twitter引导，表单包装表会导致表对齐错误

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

我正在使用TwitterBootstrap3进行CSS开发，并在本地LAMP堆栈上进行开发，该堆栈已完全更新，目前主要在Firefox中查看

我有一个包装表格的表单，不用为使用表格而生气，我主要关注PHP，现在不想研究更好的CSS格式，当然，除非你认为它将100%解决这个问题，这个问题是使用“while”循环动态填充基于mysql查询的PHP结果。表单有文本输入和选择下拉列表，用户可以在各自的单元格中更新/删除信息或从数据库中删除用户。行是在“while”循环中创建的，但是表单和表显然是在循环之外开始和结束的。submit按钮也在循环之后加载，因此它要么在自己的单元格中结束，要么也在表之外结束

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

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

我猜这与bootstrap.css文件中设置的类有关，可能与display:inline vs block有关？我曾尝试在自定义css文件中添加一个类，该类将表单设置为内联显示，并将表单包装到表中，但没有效果。HTML/CSS并不是我的强项，所以任何想法都将不胜感激。谢谢

相关页面的完整HTML

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

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

页面上有表单和对齐问题

---

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

清除重置浮动元素。如果您使用BT浮动元素，我建议您在每行重置浮动后使用BT浮动元素，例如

两者-左侧或右侧均不允许浮动元件

---

伙计，css是一个魔术=

嗨，你不应该跨越html标签，因为它可以在css中做出任何奇怪的行为。TB是一种工具，您可以根据您的情况随时更正/扩展它们。您的问题很长，所以示例会很有帮助。跨HTML标记？您的意思是在表外开始/结束表单，即使表中有表单元素？使表单完全包含在表中会导致相同的问题…您可以在任何地方发布html文件以供阅读？我想看看你的代码做了什么，这篇文章现在应该更好/更有意义了。我应该包括完整的代码以.ty开头的代码，但是你可以发布任何截图吗？代码看起来不错。我可以在浏览器中查看您的代码吗？你只能发布生成的html页面？这太棒了！再次感谢你，这真的帮了我不少忙！

<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>

<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>