bootstrap 3 div 在移动设备和平板电脑中没有响应并且太小答案

【问题标题】：bootstrap 3 div is not responsive in mobile and tablet and are too smallbootstrap 3 div 在移动设备和平板电脑中没有响应并且太小
【发布时间】：2017-11-26 03:24:36
【问题描述】：

这是我的表单，当我在我的电脑中显示时，它有一个合适的尺寸，并且表单输入在同一行，但在我的平板电脑 (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>

【问题讨论】：

举个jsFiddle的例子
jsfiddle.net/mario28/5f847jn7

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

【解决方案1】：

我添加了一个类 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>

【讨论】：