bootstrap 3 div在手机和平​​板电脑上没有响应,而且太小了

时间:2017-11-25 16:55:00

标签: html css twitter-bootstrap twitter-bootstrap-3 responsive-design

这是我的表格,当我在我的电脑中显示它有一个很好的尺寸和表格输入在同一行,但在我的平板电脑(7")它保留相同的大小,输入太小那里。我怎样才能在平板电脑中获得更大的输入?每个输入与屏幕一样宽。感谢

 <div class="col-md-6 col-md-offset-3">
  <div class="form-group row">
   <div class="col-sm-5">

   </div>
   <div class="col-sm-2" id="divprecio">

   </div>
   <div class="col-sm-2" id="divcantidad">

   </div>
   <div class="col-sm-2">

   </div>

 

1 个答案:

答案 0 :(得分:0)

我添加了一个类col-xs-12,用于在小屏幕上使其全宽,我认为它可以按照您的要求工作。好心检查。 如果它没有在PC上占据全宽,那么因为col-MD-6 col-MD-offset-3 偏移被添加,这可能会导致这种情况。

<!DOCTYPE html>

                                        

  <body>
    <div class="col-md-6 col-md-offset-3 col-sm-6 col-xs-12">
      <div class="form-group row">
        <div class="col-sm-5 col-xs-12"><div class="form-group">
    <label for="">Email address</label>
    <input type="email" class="form-control" id="" placeholder="Email">
  </div></div>


        <div class="col-sm-2 col-xs-12" id="divprecio"><div class="form-group">
    <label for="">Newlebel</label>
    <input type="text" class="form-control" id="" placeholder="Newlebel">
  </div></div>


        <div class="col-sm-2 col-xs-12" id="divcantidad"><div class="form-group">
    <label for="">Fillnew</label>
    <input type="text" class="form-control" id="" placeholder="Password">
  </div></div>


        <div class="col-sm-2 col-xs-12">

          <div class="form-group">
    <label for="">Fillabc</label>
    <input type="text" class="form-control" id="" placeholder="text">
  </div>

        </div>
      </div>
    </div>
  </body>

</html>