我缺少什么课程 - Foundation 6？

我正在学习基础6框架，并且我陷入了获得期望的结果的境地。 我缺少什么课程 - Foundation 6？

我想这三列发车办法截止到手机。

下面是我正在尝试，但无法产生结果。

.MyNewRow { 
 
    background: red; 
 
} 
 

 
.MyNewRow .large-4 { 
 
    background: yellow; 
 
} 
 

 
.MyNewRow .large-4+.large-4 { 
 
    background: green; 
 
} 
 

 
.MyNewRow .large-4+.large-4+.large-4 { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" /> 
 

 
<div class="row MyNewRow"> 
 
    <div class=" large-4 ">I am Row 1</div> 
 
    <div class=" large-4 ">I am Row 2</div> 
 
    <div class=" large-4 ">I am Row 3</div> 
 
</div>

来源

2017-04-04 Sahil Dhir

你想在一些输出桌面和手机？对？ –

是喜欢的图片提供 –

移动用户类small-#：

.MyNewRow { 
 
    background: red; 
 
} 
 

 
.MyNewRow .small-4 { 
 
    background: yellow; 
 
} 
 

 
.MyNewRow .small-4+.small-4 { 
 
    background: green; 
 
} 
 

 
.MyNewRow .small-4+.small-4+.small-4 { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" /> 
 

 
<div class="row MyNewRow"> 
 
    <div class="small-4 columns">I am Row 1</div> 
 
    <div class="small-4 columns">I am Row 2</div> 
 
    <div class="small-4 columns">I am Row 3</div> 
 
</div>

如果你想移动&桌面上相同的输出则仅使用 small-#类，无需添加其他类如 large-#或 medium-#

更多信息检查：http://foundation.zurb.com/sites/docs/grid.html

来源

2017-04-04 09:46:30

您需要添加列属性类

<div class="row MyNewRow"> 
    <div class=" large-4 columns">I am Row 1</div> 
    <div class=" large-4 columns">I am Row 2</div> 
    <div class=" large-4 columns">I am Row 3</div> 
</div>

来源

2017-04-04 09:50:45 Rakesh

什么abour large-4 small-4？它会工作没有这个直到移动？ –

我想这三列发车办法截止到移动。

Foundation框架是Mobile First你应该使用的逻辑：

我想这三列发车办法截止到桌面（大）。

始终遵循这样的规则：第一小，那么中，再大

<div class="row MyNewRow"> 
    <div class=" small-4 columns">I am Row 1</div> 
    <div class=" small-4 columns">I am Row 2</div> 
    <div class=" small-4 columns">I am Row 3</div> 
</div>

如果不定义小班，它假设为小12

来源

2017-04-04 10:01:45 Th3Alchemist

我缺少什么课程 - Foundation 6？

回答

相关问题