jquery - 为什么我的模态 Bootstrap 表单表现得像这样？

Question

由于某种原因，我的模式没有显示，因为我需要它，控件被放在左边。基本上我想要一个数字字段和一个消息区域的能力，他们可以正确评论他们的积分兑换。

echo "<div id='thanks' class='modal fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>";
echo "<div class='modal-dialog'>";
echo "<div class='modal-content'>";
echo "<div class='modal-header'>";
echo "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>";
echo "<h4 class='modal-title'>Redeem Points</h4>";
echo "</div>";
echo "<form class='form-horizontal'  class='contact' name='redemmpointsForm' id='redemmpointsForm' >";
echo " <div class='form-group'>";
echo "<h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3>";
echo "<input type='hidden' name='playerid' value='<?php echo $playerId;;?>' />";
echo "<input type='number'  valuemax='<?php echo $maxpoints;?>' name='points' id='points' class='form-control' placeholder='How many points do you wish to redeem.' />";
echo "<label class='control-label col-md-4' for='Comments'>Comments?</label>";
echo "<input type='text' name='comments' />";
echo "</div>";
echo "<div class='form-group'>";
echo "<div class='col-md-6'>";
echo "<input type='button' class='btn btn-success' name='submit' id='submit' Text='Submit'>";
echo "<a href='#' class='btn' data-dismiss='modal'>Close</a>";
echo "</div>";
echo "</div>";
echo "</form>";
echo "</div>";
echo "</div>";
echo "</div>";
}

Answer 1

放<form></form>里面<div class="modal-body"></div>

without <div class="modal-body"></div>

echo "<div class='modal-body'>";
echo "<form class='form-horizontal'  class='contact' name='redemmpointsForm' id='redemmpointsForm' >";
echo " <div class='form-group'>";
echo "<h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3>";
echo "<input type='hidden' name='playerid' value='<?php echo $playerId;;?>' />";
echo "<input type='number'  valuemax='<?php echo $maxpoints;?>' name='points' id='points' class='form-control' placeholder='How many points do you wish to redeem.' />";
echo "<label class='control-label col-md-4' for='Comments'>Comments?</label>";
echo "<input type='text' name='comments' />";
echo "     </div>";
echo "    <div class='form-group'>";
echo "            <div class='col-md-6'>";
echo "                <input type='button' class='btn btn-success' name='submit' id='submit' Text='Submit'>";
echo "     <a href='#' class='btn' data-dismiss='modal'>Close</a>";
echo "         </div>";
echo "      </div>";
echo "</form>";
echo "</div>";

会解决问题

Fiddle

旁注:如果删除 class='form-horizontal'来自 <form>并使用 Bootstrap 网格系统，可以更好地查看和控制表单元素

Fiddle