【问题标题】:Bootstrap modal form is so uglyBootstrap模态形式太丑了
【发布时间】:2016-01-03 17:10:49
【问题描述】:

我需要帮助,我无法弄清楚为什么我的模式登录表单不符合任何更改并且看起来不像标准引导表单。

导航.php

<!-- Modal HTML -->
     <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Login</h4>
                 </div>
                <div class="modal-body">
                    <p>Please log in below</p>
                    <form action="#" method="post" accept-charset="UTF-8">
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4">
                            <label class="label" for="user" style="color: black">Username</label></br>
                            <input id="user" type="text" name="user" size="30" class="input-large" placeholder="username" required/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4">
                            <label class="label" for="pass"style="color: black">Password</label></br>
                            <input id="pass" type="text" name="pass" size="30" class="input-large" placeholder="Password"required/>
                        </div>
                    </div>
                    <label class="string optional" for="user_remember_me"> Remember me</label> <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />

                    <input class="btn btn-success" style="clear: left; width: 100%; height: 32px; font-size: 13px; margin-bottom: 6px;" type="submit" name="submit" value="submit" />
              </form>
                 </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
           </div>
          </div>
      </div>

这是它的样子

这是我希望它看起来像的示例

【问题讨论】:

  • 将输入类class="input-large"更改为class="form-control"

标签: html css twitter-bootstrap bootstrap-modal


【解决方案1】:

The documentation 是你的朋友。表单、输入及其标签需要附加到 form-groupform-control(以及其他类)。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
</form>

【讨论】:

  • 人们使用引导程序而不是使用类 'form-control' 。怎么回事?
猜你喜欢
  • 2012-09-20
  • 1970-01-01
  • 2015-08-24
  • 2013-07-04
  • 2015-05-25
  • 1970-01-01
  • 2012-07-07
  • 2011-09-08
相关资源
最近更新 更多