0

レイアウトにカスタムドロップダウンがあり、その幅はリストアイテムの長さによって異なります（設計上）。このドロップダウンをグリッド幅全体（幅：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>

4

3 に答える 3

0

このようなものを試してください

form.custom div.custom.dropdown {
    width:100% !important;
}
form.custom div.custom.dropdown ul {
    width:100% !important;
}
于 2013-02-24T16:37:23.090 に答える
0

.scssファンデーションファイルを使用している場合は、app.scssに次のものを追加できます。

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

または、.12に使用されているcssを確認して、コンボボックスに追加することもできます。

于 2013-04-19T08:07:04.737 に答える
0

</div> 3つの簡単な観察...最初の宣言のが欠落しています。<div class="row">もう1つの観察は、4列のdivにドロップダウンが設定されているため、ドロップダウンを4列の幅の100％にしようとしていますか。アプリ全体の幅は100％ですか？また、どのバージョンのファンデーションを使用していますか？3番目の観察では、Foundation3以下の構文を使用しています。4と5の新しい構文は<div class="row"><div class="large-12 columns"></div></div>...「large-12」に注意してください。したがって、私の答えは、欠落しているend divを追加し、適切なグリッド構文を使用することです。これで問題が解決しない場合は、jsfiddleで何かを設定してください。これにより、使用しているFoundationとjqueryのバージョンがわかり、実際の問題が実際に発生していることがわかります。これがお役に立てば幸いです。

于 2014-02-05T01:39:53.383 に答える