文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >引导模式的高度和宽度不准确

问引导模式的高度和宽度不准确
EN

Stack Overflow用户
提问于 2017-06-30 22:59:01
回答 2查看 552关注 0票数 2

我正在使用引导模式，但问题是引导模式没有根据表单正确对齐。请查看下面的截图

​

​

这里的代码是：

​

代码语言：javascript
复制
.modal.fade .modal-header {
  background-color: rgba(131, 72, 172, 0.8);
  color: #FFF;
}
代码语言：javascript
复制
<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>

​

我试图通过css使用.modal { width: 350px; }来减小模式的宽度，但是弹出窗口没有出现在中心位置。

提前谢谢。

html
css
twitter-bootstrap
EN

回答 2

Stack Overflow用户

发布于 2017-06-30 23:07:12

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

​

代码语言：javascript
复制
.modal.fade .modal-header { background-color:rgba(131,72,172, 0.8); color:#FFF;}
代码语言：javascript
复制
<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>

​

票数 3
EN

Stack Overflow用户

发布于 2017-07-01 00:43:36

试一试，记住HTML是你的朋友;)

​

代码语言：javascript
复制
.modal.fade .modal-header {
  background-color: rgba(131, 72, 172, 0.8);
  color: #FFF;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/44849416

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档