Question

您好我正在尝试学习基础5，我有以下代码在我的笔记本电脑上运行正常，但在我的手机（Android）上查看同一页面看起来很乱，而不是在屏幕和文本之外扩展按钮 - 任何想法为什么??

  <div class="row">
    <div class="large-12 columns">
      <ul class="button-group even-4 expand">
         <li><a href="#" class="button secondary">TEST 1</a></li>
        <li><a href="#" class="button secondary">TEST 2</a></li>
        <li><a href="#" class="button secondary">TEST 3</a></li>
        <li><a href="#" class="button secondary">TEST 4</a></li>
      </ul>
    </div>
  </div>

Answer 1

由于您使用的是large-12布局，因此您的设计无法正确显示以适应较小的屏幕。

有关Foundation网格的文档，请参阅以下内容：http://foundation.zurb.com/docs/components/grid.html

Answer 2

阅读基础5文档以及小型，中型，大型和xlarge类，但作为快速提示，如果您希望div保持其精确比例，并且所有设备都能使您的html代码适应移动设备，请使用小班级，因为除非你宣布另一个

，否则这将保持一定比例

<div class="row">
    <div class="small-12 columns">
      <ul class="button-group even-4 expand">
        <li><a href="#" class="button secondary">TEST 1</a></li>
        <li><a href="#" class="button secondary">TEST 2</a></li>
        <li><a href="#" class="button secondary">TEST 3</a></li>
        <li><a href="#" class="button secondary">TEST 4</a></li>
      </ul>
    </div>
  </div>

基础5按钮

2 个答案: