Bootstrap模态高度和宽度不准确

Question

我正在使用bootstrap模式，但问题是bootstrap模式没有根据表单正确对齐。请找到

的屏幕截图

这里的代码是：

＆＃13;

＆＃13;

.modal.fade .modal-header {
  background-color: rgba(131, 72, 172, 0.8);
  color: #FFF;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade " id="myModal" tabindex="-1" style="display:none;" role="dialog" aria-labelledby="myModal" aria-hidden="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
        <h4 class="modal-title" id="myModalLabel" align="center">Quick Enquiry</h4>
      </div>
      <div class="modal-body">
        <p>Please fill up the form for Quick Enquiry.</p>
      </div>
      <div class="modal-body">
        <div class="span12">
          <form method="post" enctype="multipart/form-data" action="email_format.php">
            <input type="text" style="width: 300px; height: 40px;" class="form-control" required name="name" value="" placeholder="Full Name">
            <br>

            <input type="email" id="reqDate" style="width: 300px; height: 40px;" class="form-control" name="email" placeholder="Email" required>
            <br>
            <input type="text" id="reqDate" style="width: 300px; height: 40px;" class="form-control" required name="website" placeholder="Website">
            <br>
            <input type="text" id="reqDate" style="width: 300px; height: 40px;" class="form-control" required name="phone" placeholder="Phone">
            <br>
            <input type="text" id="reqDate" style="width: 300px; height: 40px;" class="form-control" required name="msg" placeholder="Questions?">

        </div>
        <div class="col-md-6">
          <p style="font-size:11px; line-height:20px;"> <input type="checkbox" checked />&nbsp; &nbsp; I accept <a href="terms.php" target="_blank">SEO_Faceup Terms & Conditions</a>.</p>
        </div>
        <div class="modal-footer">
          <button type="submit" name="questions" class="thm-btn b-inner font-8">Submit</button></div>
      </div>

    </div>
  </div>

</div>
</div>
</form>
</div>


<a href="#" data-toggle="modal" data-target="#myModal" style="text-decoration:none">QUICK ENQUIRY</a></div>

＆＃13;

＆＃13;

＆＃13;

我尝试使用.modal { width: 350px; }通过css减小模态的宽度，但弹出窗口不会出现在中心。

提前致谢。

Answer 1

要直接回答您的问题，请将style="width: 350px; margin: 0 auto;"添加到.modal-body课程。另外，我建议您使用类而不是内联样式。

.modal.fade .modal-header { background-color:rgba(131,72,172, 0.8); color:#FFF;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <div class="modal fade " id="myModal" tabindex="-1" style="display:none;" role="dialog" aria-labelledby="myModal" aria-hidden="false">
  <div class="modal-dialog" style="width: 320px; margin: 0 auto;">
    <div class="modal-content">
    <div class="modal-header">
    	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
        <h4 class="modal-title" id="myModalLabel" align="center">Quick Enquiry</h4>
    </div>
    <div class="modal-body" style="width: 100%; margin: 0 auto;">
        <p>Please fill up the form for Quick Enquiry.</p>
<div class="span12">
<form  method="post" enctype="multipart/form-data" action="email_format.php">
        		 <input type="text"  style="height: 40px;" class="form-control" required name="name" value="" placeholder="Full Name">
<br>

        	 <input type="email" id="reqDate"  style="height: 40px;" class="form-control" name="email"  placeholder="Email"required>
<br>
  <input type="text" id="reqDate"  style="height: 40px;" class="form-control" required name="website"  placeholder="Website">
<br>
          <input type="text" id="reqDate"  style="height: 40px;" class="form-control" required name="phone" placeholder="Phone">
<br>
            <input type="text" id="reqDate"  style="height: 40px;" class="form-control" required name="msg"  placeholder="Questions?">

    </div>
    <div class="col-md-6">
      <p style="font-size:11px; line-height:20px;">  <input type="checkbox" checked />&nbsp; &nbsp; I accept <a href="terms.php" target="_blank">SEO_Faceup Terms & Conditions</a>.</p>
    </div>
         <div class="modal-footer">
           <button type="submit"  name="questions" class="thm-btn b-inner font-8" >Submit</button></div>
    </div>

    </div>
  </div>

    </div></div>
    </form>
</div>


	<a href="#" data-toggle="modal" data-target="#myModal" style="text-decoration:none">QUICK ENQUIRY</a></div>

Answer 2

试试这个，记住HTML是你的朋友;）

.modal.fade .modal-header {
  background-color: rgba(131, 72, 172, 0.8);
  color: #FFF;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade " id="myModal" tabindex="-1" style="display:none;" role="dialog" aria-labelledby="myModal" aria-hidden="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
        <h4 class="modal-title" id="myModalLabel" align="center">Quick Enquiry</h4>
      </div>
      <div class="modal-body">
        <p><center>Please fill up the form for Quick Enquiry.</center></p>
      </div>
      <div class="modal-body">
<center>   
<div class="span12">
          <form method="post" enctype="multipart/form-data" action="email_format.php">
            <input type="text" style="width: 300px; height: 40px;" class="form-control" required name="name" value="" placeholder="Full Name">
            <br>

            <input type="email" id="reqDate" style="width: 300px; height: 40px;" class="form-control" name="email" placeholder="Email" required>
            <br>
            <input type="text" id="reqDate" style="width: 300px; height: 40px;" class="form-control" required name="website" placeholder="Website">
            <br>
            <input type="text" id="reqDate" style="width: 300px; height: 40px;" class="form-control" required name="phone" placeholder="Phone">
            <br>
            <input type="text" id="reqDate" style="width: 300px; height: 40px;" class="form-control" required name="msg" placeholder="Questions?">
<center>
        </div>
        <div class="col-md-6">
          <p style="font-size:11px; line-height:20px;"> <input type="checkbox" checked />&nbsp; &nbsp; I accept <a href="terms.php" target="_blank">SEO_Faceup Terms & Conditions</a>.</p>
        </div>
        <div class="modal-footer">
          <button type="submit" name="questions" class="thm-btn b-inner font-8">Submit</button></div>
      </div>

    </div>
  </div>

</div>
</div>
</form>
</div>


<a href="#" data-toggle="modal" data-target="#myModal" style="text-decoration:none">QUICK ENQUIRY</a></div>