Question

我的布局中有一个自定义下拉列表，它的宽度取决于列表项的长度（我认为是设计）。我想将此下拉列表拉伸到整个网格宽度（宽度：100％），但类或内联样式不起作用。在我的渲染源代码中，看到注入的内联样式宽度由任何基础脚本计算，我不知道如何覆盖它。任何解决方案？

<div class="row">
<div class="twelve columns">
    <div class="row">
        <div class="eight columns " style="background-color:red">
                some content
        </div>
        <div class="four columns " style="background-color:blue">
            <form class="custom">       
                <select style="display: none;">
                    <option value="1">opt a</option>
                    <option selected="selected" value="2">opt b</option>
                    <option value="3">opt c</option>
                    <option value="4">opt d</option>
                </select>
                <div class="custom dropdown">
                    <a class="current " href="#" >
                        opt b
                    </a>
                    <a class="selector" href="#"></a>
                    <ul>
                        <li>opt a</li>
                        <li class="selected">opt b</li>
                        <li>opt c</li>
                        <li>opt d</li>
                    </ul>
               </div>
            </form>
        </div> 
    </div>
</div>

Answer 1

尝试这样的事情

form.custom div.custom.dropdown {
    width:100% !important;
}
form.custom div.custom.dropdown ul {
    width:100% !important;
}

Answer 2

如果您使用的是.scss基础文件，则可以添加到app.scss：

//foundation 4 syntax
form.custom {
  .dropdown {
    @include grid-column($columns:12,$float:left);
  }

或者你可以找出用于.twelve的css并添加到你的组合框

Answer 3

3次快速观察...您的第一个</div>声明缺少<div class="row">，而另一个观察是您在div中设置了4列的下拉列表，所以您是否正在尝试使下拉列表的四列宽度为100％，或整个应用程序的宽度为100％？另外，你使用什么版本的基础？第三个观察，你使用的是基础3及以下的语法。 4＆amp;的新语法5是<div class="row"><div class="large-12 columns"></div></div> ...注意“大12”。所以我的答案是，添加缺少的结尾div，并使用适当的网格语法。如果这对你没有帮助，请在jsfiddle中设置一些东西，这样我们就知道你正在使用什么版本的基础和jquery，并且可以看到实际的问题。希望这有帮助。

如何在zurb基础上将自定义下拉伸展到整个网格宽度

3 个答案: