标签: zurb-foundation

我在基础4中使用Orbit并且想完全禁用计时器功能,因此幻灯片只能由用户手动提前.这可能吗？

我正在使用 Foundation 4 框架创建一个服务器文件表，并且似乎遇到一个问题：当文件名长到两行时，并非所有行都可单击。我需要整个阴影行作为链接。

请参阅我在 Photoshop 中突出显示的可点击区域的图像。

每行的HTML结构如下：

<div class="fileTable row alternate">
    <a class="icon folder" href="#">
        <div class="large-10 columns margin">test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder test folder</div>
        <div class="large-2 hide-for-small columns margin">23/05/2013</div>
    </a>
</div>

.margin 的类别似乎是问题所在。添加它是为了使文本在每行内垂直居中，它在顶部和底部添加了 7px。我本来会使用 line-height 并将其设置为每行相同的高度（44px），但这会导致两行上的任何文件名的行之间存在巨大间隙。

上面的屏幕截图正是我需要的样子，只是由于某种原因它不能正确地作为链接。

fileTable 链接的 CSS 如下：

.fileTable a {
    display: block;
    line-height: 25px;
    text-decoration: none;
    color: #000000;
    padding-left: 40px;
}

.margin {
    margin-top: 7px; …

我想更改下拉字段.对于普通的,这很容易,但是Foundation用自定义下拉字段替换它.

这里的HTML代码:

<div class="row">
   <div class="small-centered columns">
  <select name="language" id='customDropdown' class='large languageDropdown'>
         <option value="de">German</option>
         <option value="en">English</option>
         <option value="ca">Castelliano</option>
         <option value="es">Spanisch</option>
         <option value="fr">Französisch</option>
         <option value="pt">Portugisisch</option>
      </select>
   </div>
</div>

这就是基金会的基础:

<div class="row">
<div class="small-centered columns">
    <select name="language" id="customDropdown" class="large languageDropdown hidden-field" data-id="1375994037026-oNYTe">
                <option value="de">German</option>
                <option value="en">English</option>
                <option value="ca">Castelliano</option>
                <option value="es">Spanisch</option>
                <option value="fr">Französisch</option>
                <option value="pt">Portugisisch</option>
           </select>
           <div class="custom dropdown large languageDropdown" data-id="1375994037026-oNYTe">
              <a href="#" class="current">German</a>
              <a href="#" class="selector"></a>
              <ul>
                  <li class="selected">German</li>
                  <li class="">English</li>
                  <li class="">Castelliano</li>
                  <li class="">Spanisch</li>
                  <li class="">Französisch</li>
                  <li class="">Portugisisch</li>
              </ul>
           </div> …

我有一个使用Ember和Foundation宝石的rails应用程序.所有这些都按预期工作,直到我尝试使用Foundation的Orbit滑块 - http://foundation.zurb.com/docs/components/orbit.html.

Foundation gem包含body标签中的所有js文件,因此我需要的两个文件 - foundation.js和foundation.orbit.js - 都在那里.

唯一的其他说明是附加data-orbit到您想要滑过的任何元素.我看起来像:

<ul data-orbit>
  <li><img src="/assets/ewabout_1.jpg" class="carousel-pics"></li>
  <li><img src="/assets/ewabout_2.jpg" class="carousel-pics"></li>
  <li><img src="/assets/ewabout_3.jpg" class="carousel-pics"></li>
  <li><img src="/assets/ewabout_4.jpg" class="carousel-pics"></li>
  <li><img src="/assets/ewabout_5.jpg" class="carousel-pics"></li>
</ul>

但是当我加载页面时,图像只是堆叠在一起,就像应用程序找不到javascript一样.

我觉得这可能是一个余烬问题,但我不确定.我需要在Ember View中添加一些内容吗？

UPDATE

更改application.js为以下和滑块渲染,但将子弹/按钮等相乘页面导致网站崩溃.但至少它会让滑块移动？

//= require jquery
//= require jquery_ujs
//= require foundation
//= require handlebars
//= require ember
//= require_self
//= require ew
Ew = Ember.Application.create({
    ready: function () {
    setInterval(function() {
      $(document).foundation();
    }, 2000);
  }
});

有没有办法将背景延伸到网格的左侧或右侧？例如，如果我想做一个带有网格的 100% 背景，我会做类似的事情：

<div class="100%BACKGROUND">
    <div class="row>
        <div class="large-12 columns>
        </div>
    </div>
</div>

哪个工作得很好，但是如果我想将网格外的背景颜色扩展到页面的一侧，我的意思是例如

<div class="row>

     <div class="large-8 columns">

     </div>

     <div class="BACKGROUNDSTART"> <-- background start

     <div class="large-4 columns">

     </div>

 </div>

 </div> <-- background end 

现在这显然不起作用，但这是我试图实现的那种东西，它是一个看起来如何的模型。

我有一个输入,要求最小数值为125.我是regex的新手,并使用Foundation的Abide进行验证,据我所知,没有特定的混合/最大支持.我希望在模式属性中设置正则表达式.有解决方案吗 谢谢!

我正在尝试在我的笔记本电脑上制作一个响应式网站。我在0.0.0.0端口 3000使用实时重新加载，以便我也可以在我的移动设备上观看我的项目，但我遇到了这个奇怪的问题。当我查看我的项目时，127.0.0.1我得到以下布局：

但是当我在localhost或查看我的网站时192.168.0.102，0.0.0.0我得到以下布局：

下面是 127.0.0.1 上 Chrome 的图片

我不知道为什么会这样。我用过了：

1. Zurb 基金会 5
2. 波旁酒

在基础github页面上,推荐的安装基础的方法是他们建议使用bower install foundation的文档foundation new MY_PROJECT.在文档页面上,第一种方法仅列在"使用任务运行器"部分下.两种方法都提供不同的文件结构 两种方式都是正确的,如果是这样,那么为什么它们提供不同的文件结构

这是代码：

<div class="row">
  <div class="large-12 columns">

    <table class="scroll wide">

      <tr>
        <td>First</td>
        <td>Second</td>
        <td>Third</td>
        <td>Forth</td>
      </tr>

    </table>

  </div>
</div>

的CSS

.wide { width: 100%; }

这是小提琴：

https://jsfiddle.net/emilcieslar/zc37ydys/

如您所见，只要页面的宽度小于表的宽度，就有4列和滚动类使表可滚动。但是，如果我想使桌子的宽度为100％，它保持不变，就不会拉伸。我可以看到table标签本身是拉伸的，但是内部却没有拉伸。这是由于表正在显示：块引起的，但是必须是显示：块，否则它将无法滚动（在水平轴上）。如何在仍保持响应状态的同时实现100％宽度的表格？

为什么网格系统在 6.4.1 中停止工作了？它在 6.3.1 中工作。

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

<div class="row">
  <div class="medium-2 columns">2 columns</div>
  <div class="medium-10 columns">10 columns</div>
</div>
<div class="row">
  <div class="medium-3 columns">3 columns</div>
  <div class="medium-9 columns">9 columns</div>
</div>

<script>
  $(document).foundation();
</script>

有任何想法吗？