Question

<div class="row padding5px">
  <div class="col-md-2">
    <span class="login-block-header" id="lblAccountHeading">Account Number</span>
  </div>
  <div class="col-md-4">
    <select id="ddlAccountNo" class="form-control">
      <option>Select</option>
    </select>
  </div>
  <div class="col-md-4">
    <button id="btnReport" type="button" class="btn btn-primary">Show Report</button>
  </div>
</div>

我在bootstrap中遇到问题。我添加了控制宽度的类，它们在普通屏幕上显示在一行中，但在移动设备上重新调整大小并没有正确显示。

Answer 1

您应该为移动设备使用正确的引导列大小标记col-xs-，以及更大屏幕的标记。所以你可以说class="col-md-2 col-xs-3"例如。

所以你的HTML可能看起来像这样;

<div class="row padding5px">
  <div class="col-md-2 col-xs-2">
    <span class="login-block-header" id="lblAccountHeading">Account Number</span>
  </div>
  <div class="col-md-4 col-xs-5">
    <select id="ddlAccountNo" class="form-control">
      <option>Select</option>
    </select>
  </div>
  <div class="col-md-4 col-xs-5">
    <button id="btnReport" type="button" class="btn btn-primary">Show Report</button>
  </div>
</div>

我在bootsrap类中有问题，它在正常屏幕中正确显示但在移动大小上有问题

1 个答案: