1. 首页
  2. 问答
  3. from-control的宽度太大

from-control的宽度太大

2016-11-27 44 views
0

我试图让我的网站响应手机，并使用bootstrap 3，这一切都很好，但元素“形式控制”有很大的宽度（大于手机屏幕），我认为这就是为什么我的页面右侧没有空格。我怎样才能做响应式表单控制？ 这一切都在容器流体和所有行的正常工作。我有容器流体，然后排类为“灰色bg”和3行。最后一行是我的形式。from-control的宽度太大

<div class="row"> 
    <div class="grey-bg"> 

      <div class="col-lg-1"></div> 

     <div class="row"> 
      <div class="bookTitle imgBottomText col-lg-4 col-md-5 " style="padding: 0"> 
       <h3>The secret <span>free</span> eBook we offer!</h3> 
       <br> 
       <p>Enter your email address and recieve this free eBook & to also subscribe to our weekly newsletter</p> 
       <br> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="bookImage col-lg-3 col-md-4"></div> 

      <div class="col-lg-2 col-md-2"> 
       <h5 class="title1"><i class="fa fa-heart-o"></i>&nbsp;Lorem ipsum dolor</h5> 
       <h5 class="title2"><i class="fa fa-paperclip"></i>&nbsp;Lorem ipsum dolor</h5> 
       <h5 class="title3"><i class="fa fa-envelope-o"></i>&nbsp;Lorem ipsum dolor</h5> 
      </div> 
     </div> 
     <div class="row"> 

       <form class="form-inline newslatter-form"> 
        <div class="col-xs-8"> 
        <div class="form-group"> 
         <label class="sr-only" for="exampleInputEmail3">Email address</label> 
         <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email"> 
        </div> 
      </div> 
        <div class="col-xs-4"> 
        <div class="form-group"> 
         <button type="submit" class="btn btn-warning submit-newsletter"><i class="fa fa-angle-right"></i></button> 
        </div> 
        </div> 
       </form> 
     </div> 
      </div> 
      <div class="col-lg-2"></div> 
     </div>

来源

2016-11-27 Rosti

+0

在你的代码中不使用类容器流体，但使用的是行，而不是 – Chiller

+0

我不显示所有标记，因为它是非常大的。我把我所有的内容都包装在“容器流体” – Rosti

回答

0

的.row类让你负margin向两侧。我添加了一个.container类作为内容包装并评论不必要的.row类。

请注意，如果您将注释行取消注释，文本将无法呼吸，并且对视口边将过于紧张。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <!-- <div class="row"> --> 
 
     <div class="grey-bg"> 
 

 
       <div class="col-lg-1"></div> 
 
      <!-- <div class="row"> --> 
 
       <div class="bookTitle imgBottomText col-lg-4 col-md-5 " style="padding: 0"> 
 
        <h3>The secret <span>free</span> eBook we offer!</h3> 
 
        <br> 
 
        <p>Enter your email address and recieve this free eBook & to also subscribe to our weekly newsletter</p> 
 
        <br> 
 
       </div> 
 
      <!-- </div> --> 
 
      
 
      <div class="row"> 
 
       <div class="bookImage col-lg-3 col-md-4"></div> 
 

 
       <div class="col-lg-2 col-md-2"> 
 
        <h5 class="title1"><i class="fa fa-heart-o"></i>&nbsp;Lorem ipsum dolor</h5> 
 
        <h5 class="title2"><i class="fa fa-paperclip"></i>&nbsp;Lorem ipsum dolor</h5> 
 
        <h5 class="title3"><i class="fa fa-envelope-o"></i>&nbsp;Lorem ipsum dolor</h5> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 

 
        <form class="form-inline newslatter-form"> 
 
         <div class="col-xs-8"> 
 
         <div class="form-group"> 
 
          <label class="sr-only" for="exampleInputEmail3">Email address</label> 
 
          <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email"> 
 
         </div> 
 
       </div> 
 
         <div class="col-xs-4"> 
 
         <div class="form-group"> 
 
          <button type="submit" class="btn btn-warning submit-newsletter"><i class="fa fa-angle-right"></i>Submit</button> 
 
         </div> 
 
         </div> 
 
        </form> 
 
      </div> 
 
       </div> 
 
      <div class="col-lg-2"></div> 
 
     <!-- </div> --> 
 
</div>

来源

2016-11-27 12:41:48 Syden

0 

<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <script 
 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
 
    crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
</head> 
 
<div class="container-fluid"> 
 
    <div class="row grey-bg"> 
 
    <div class="col-lg-1"> 
 
     <div class="row"> 
 
     <div class="bookTitle imgBottomText col-lg-4 col-md-5 " style="padding: 0"> 
 
      <h3>The secret <span>free</span> eBook we offer!</h3> 
 
      <br> 
 
      <p>Enter your email address and recieve this free eBook & to also subscribe to our weekly newsletter</p> 
 
      <br> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="bookImage col-lg-3 col-md-4"></div> 
 
     <div class="col-lg-2 col-md-2"> 
 
      <h5 class="title1"><i class="fa fa-heart-o"></i>&nbsp;Lorem ipsum dolor</h5> 
 
      <h5 class="title2"><i class="fa fa-paperclip"></i>&nbsp;Lorem ipsum dolor</h5> 
 
      <h5 class="title3"><i class="fa fa-envelope-o"></i>&nbsp;Lorem ipsum dolor</h5> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 

 
     <form class="form-inline newslatter-form"> 
 
      <div class="col-xs-8"> 
 
      <div class="form-group"> 
 
       <label class="sr-only" for="exampleInputEmail3">Email address</label> 
 
       <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email"> 
 
      </div> 
 
      </div> 
 
      <div class="col-xs-4"> 
 
      <div class="form-group"> 
 
       <button type="submit" class="btn btn-warning submit-newsletter"><i class="fa fa-angle-right"></i>Submit</button> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-2"></div> 
 
    </div>

来源

2016-11-27 12:35:21

相关问题

 相关问题