Question

我正在jumbotron中制作一个表单，出于某种原因，我让它在桌面视图上看起来很好但是当它在移动设备上查看时，它就会从jumbotron中消失。我正在使用netbeans来编写代码。我甚至使用@media（最大宽度：620px）。我尝试使用谷歌但失败了：（

    #wrapper{
        width: 500px;
        height: 700px;
        position: relative;
        margin: 0 auto;
        background-color: rgba(255,255,255,.75);
        text-align: center;
        
    }
    form{
        color: black;
        text-align: center;
       
    }
    div{
       clear: both;
    }
    #off{
        background-color: rgba(225,0,0,.85);
        color: white;
        width: 525px;
        height: 140px;
        font-size: 1rem;
        text-align: center;
    }
    
    .formHeader{
        color: #104c8b;
    }
    .formFooter{
        background-color: rgba(0,0,255,.5);
        color: white;
        margin: 65px 0 0 0;
    }
    
    @media(max-width: 620px) {
       
        #wrapper{
        width: 100px;
        height: 100px;
        position: relative;
        margin: 0 auto;
        background-color: rgba(255,255,255,.75);
        text-align: center;
        
    }

    <section id="top" class="jumbotron">
            <div class="container-fluid">
                <div class="row text-center">
                    <div id="wrapper"><p>Contact Form</p>
                        <div class="formHeader">
                            
                        </div>
                <form action="test.html" method="get" name="test" id="myForm">
                    <label>Name</label><input name="name" type="text" /><br>
                    <label>Email</label><input name="email" type="text" /><br>
                    <label>Phone</label><input name="number" type="text" /><br>
                    <input type="submit" value="Send"/>
                </form>
                    <div class="formFooter">
                            
                    </div>
            </div>
        </div> 
      </div>
      </section>

Answer 1

鉴于你使用Bootstrap作为一个框架，似乎很遗憾不能充分利用所有的框架。通过重构HTML（使用Bootstrap的响应类和表单控件），您可以轻松实现所需的响应能力。

大部分内容只是为网格布局添加必要的.col-*-*，当然还要将Bootstrap类应用于input和label元素等。下面是Bootply的示例。代码经过重大修改，以更好地反映Bootstrap的框架和现代输入分类（如tel或email等）。

http://www.bootply.com/mPNCZyXbbD

HTML：

<section id="top" class="jumbotron">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 col-md-offset-4">
        <div class="form-wrapper text-center">
          <p>Contact Form</p>

          <form action="test.html" method="get" name="test" id="myForm" class="form form-horizontal">

          <div class="form-group">
            <label for="name" class="col-sm-2 control-label">Name</label>
            <div class="col-sm-10">
              <input name="name" type="text" class="form-control">
            </div>
          </div>

          <div class="form-group">
            <label for="email" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
              <input name="email" type="email" class="form-control">
            </div>
          </div>

          <div class="form-group">
            <label for="email" class="col-sm-2 control-label">Phone</label>
            <div class="col-sm-10">
              <input name="number" type="tel" class="form-control">
            </div>
          </div>

          <button type="submit" class="btn btn-default">Send</button>
          </form>

        </div>
      </div>
    </div> 
  </div>
</section>

CSS：

.form-wrapper {
  padding: 15px;
  background: rgba(255,255,255,0.75);
}

使表单响应

1 个答案: