Question

我不是最好的html / css编码器，我有这个html在桌面上工作正常，但在手机上看起来很差。

<div class="col-md-6">
  <div class="col-md-9">
    <div class="row"><strong>Estimated # of Monthly XXXXXXXXs:</strong></div>
    <div class="row"><strong>Estimated Monthly Revenue Increase!!:</strong></div>
    <div class="row"><strong>Estimated Monthly XXXXXXXXXs Costs:</strong>  </div>
    <div class="row"><strong>Using XXXXXXXXX gives you:</strong></div>
    <div class="row"></div>
    <div id="qrow"></div>
  </div>
  <div class="col-md-3"><strong>
    <div id="howl">0</div></strong>
    <div class="row"></div><strong>
    <div id="howt">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howa">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howri">$0.00</div></strong>
    <div class="row"></div>
    <div id="qint"></div>
  </div>
</div>

在桌面上，它显示为：

Estimated # of Monthly Leads:         0
Estimated Monthly Revenue Increase:   $0.00
Estimated Monthly XXXXXXXX Costs:     $0.00
Using XXXXXXXXX gives you:            $0.00

但是在手机上显示为：

Estimated # of Monthly 
Leads:         
Estimated Monthly Revenue
Increase:   
Estimated Monthly XXXXXXXX
Costs:     
Using XXXXXXXXX gives you:            
0
$0.00
$0.00
$0.00

我可以使用单个网格，但我喜欢两个列都对齐。那么如何在手机上保持相同的桌面格式呢？

Answer 1

如果您使用的是bootstrap 3，请使用col-xs-3按照您想要的方式调整手机。请按照以下代码进行操作。

<div class="col-xs-6 col-md-6">
  <div class="col-xs-9 col-md-9">
    <div class="row"><strong>Estimated # of Monthly XXXXXXXXs:</strong></div>
    <div class="row"><strong>Estimated Monthly Revenue Increase!!:</strong></div>
    <div class="row"><strong>Estimated Monthly XXXXXXXXXs Costs:</strong>  </div>
    <div class="row"><strong>Using ActiveLEAD gives you:</strong></div>
    <div class="row"></div>
    <div id="qrow"></div>
  </div>
  <div class="col-xs-3 col-md-3"><strong>
    <div id="howl">0</div></strong>
    <div class="row"></div><strong>
    <div id="howt">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howa">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howri">$0.00</div></strong>
    <div class="row"></div>
    <div id="qint"></div>
  </div>
</div>

Answer 2

使用此fiddle ..

＆＃13;

<div class="col-md-6 col-sm-12 col-xs-12">
  <div class="col-md-9 col-sm-9 col-xs-9">
    <div class="row">
      <strong>Estimated # of Monthly XXXXXXXXs:</strong>
    </div>
    <div class="row">
      <strong>Estimated Monthly Revenue Increase!!:</strong>
    </div>
    <div class="row">
      <strong>Estimated Monthly XXXXXXXXXs Costs:</strong>
    </div>
    <div class="row">
      <strong>Using ActiveLEAD gives you:</strong>
    </div>
    <div class="row"></div>
    <div id="qrow"></div>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-3"><strong>
    <div id="howl">0</div></strong>
    <div class="row"></div><strong>
    <div id="howt">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howa">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howri">$0.00</div></strong>
    <div class="row"></div>
    <div id="qint"></div>
  </div>
</div>

＆＃13;

Bootstrap网格格式化 - 不同的设备

2 个答案: