Question

我有一个需要以所有屏幕尺寸为中心的列表。我有以下代码 -

<div class="container container-fluid.body-content">
   <div class="row">
      <h2 style="text-align:center;">Select your Campus</h2>
   </div>
   <div class="row">
      <div class="col-lg-6 col-lg-offset-3 col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 btn-group-vertical" style="background-color:#EAEBED;padding:2%;" id="dispcolleges" role="group" aria-label="...">
        <button type="button" class="btn btn-default" onclick="storeValue('4847453903781888','National Institute of Technology Karnataka')">National Institute of Technology Karnataka</button>
        <button type="button" class="btn btn-default" onclick="storeValue('5743114304094208','Test')">Test</button></div>
   </div>
</div>

它以大屏幕和中等屏幕的偏移为中心，但不适用于小屏幕。我该如何解决这个问题？

可以找到完整代码here

Answer 1

试试这个：

<div class="container container-fluid.body-content">
  <div class="row">
    <h2 style="text-align:center;">Select your Campus</h2>
  </div>
  <div class="row">
      <div class="col-lg-6 col-lg-offset-3 col-sm-offset-3 col-sm-6 col-xs-10 col-md-6 col-md-offset-6 btn-group-vertical col-xs-offset-1" style="background-color:#EAEBED;padding:2%;" id="dispcolleges" role="group" aria-label="..."><button type="button" class="btn btn-default" onclick="storeValue('4847453903781888','National Institute of Technology Karnataka')">National Institute of Technology Karnataka</button><button type="button" class="btn btn-default" onclick="storeValue('5743114304094208','Test')">Test</button></div>
  </div>
</div>

Answer 2

原因是display: inline-block;

等级btn-group-vertical

解决方案：为display: inherit;添加<div>。试试这个：

    <div class="container container-fluid.body-content">
      <div class="row">
        <h2 style="text-align:center;">Select your Campus</h2>
      </div>
      <div class="row">
        <div class="col-lg-6 col-lg-offset-3 col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 btn-group-vertical" style="background-color:#EAEBED;padding:2%;display: inherit;" id="dispcolleges" role="group" aria-label="..."><button type="button" class="btn btn-default" onclick="storeValue('4847453903781888','National Institute of Technology Karnataka')">National Institute of Technology Karnataka</button><button type="button" class="btn btn-default" onclick="storeValue('5743114304094208','Test')">Test</button></div>
      </div>
    </div>

列偏移和居中不在小屏幕中工作（引导程序）

2 个答案: