は、私は私のサブメニューが下の画像のように、ブラウザウィンドウの幅いっぱいに広がるようにしたい:私も私のメインメニューが右に浮いてBootstrap
を、使用していますサブメニューをブラウザウィンドウの全幅に広げる方法は?
。
これまでに行ったことについてデモを作成しました。この結果はどのように達成するのですか?
http://codepen.io/ifusion/pen/oLVVXj
は、私は私のサブメニューが下の画像のように、ブラウザウィンドウの幅いっぱいに広がるようにしたい:私も私のメインメニューが右に浮いてBootstrap
を、使用していますサブメニューをブラウザウィンドウの全幅に広げる方法は?
。
これまでに行ったことについてデモを作成しました。この結果はどのように達成するのですか?
http://codepen.io/ifusion/pen/oLVVXj
まず、ブートストラップは、あなたが本当にunflexibleなります。だから、それを使用したい場合は、width:100%;
が親に依存しているので、メニューの要素からサブメニューを移動することをお勧めします。したがって、親よりも広い必要があるすべてのものは、この親要素の子であってはなりません。さらに、position:absolute
は、次の親にposition:absolute
またはposition:relative
と依存しています。だから簡単にはできないことがたくさんあります。サブメニューを移動するともっと簡単になります。そこにはとposition:absolute
をleft:0
と使用するだけです。
またあなたがposition:fixed
を使用することができ、ページの流れのうち、サブメニューを取得します。そしてwidth:100%
。この解決方法は3210です。もっと仕事があっても、私は最初のものがもっと好きです。しかし、固定配置にはいくつかの副作用がありますが、重要ではないかもしれません。
まず第一に、それの親要素がposition: relative
を持っているので、サブメニューの幅が制限されています。
これを削除すると、サブメニューは全幅になりますが、アイテムはまだ左に揃えられます。
以下の例では.main-menu-dropdown
を使用してdisplay: flex
を使用し、その中の項目の中央に配置しました。すべての
http://codepen.io/adrianlynch/pen/RRddjk
.main-menu-dropdown {
position: absolute;
left: -15px;
right: -15px;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
list-style-type: none;
background: black;
}
それは全幅が、クラスの幅 '' COL-MD-12''ではありません。 – ScientiaEtVeritas
ええ、@ScientiaEtVeritasはこれがブラウザの全幅である必要があると言いました。 .container-fluidがどのように全幅に及んでいるかのように。また、私はブラウザの不一致のためにflexを使わないようにしたいと思っています。 – ifusion
これに該当する場合は、左右の幅を調整して調整します。 –
位置絶対子供が最も近い位置の相対親に対する位置しますので、メインメニュー李のための位置を削除すると、この問題を解決します。また、bodyとhtmlからパディングとマージンを削除します。
body, html{
margin: 0;
padding: 0;
}
.main-menu {
list-style-type: none;
padding: 0;
margin: 0;
float: right;
}
.main-menu li {
float: left;
}
.main-menu li a {
display: block;
background: #c2c2c2;
padding: 20px;
color: #337ab7;
text-decoration: none;
}
.main-menu-dropdown {
position: absolute;
left: 0;
right: 0;
display: block;
padding: 0;
list-style-type: none;
background-color: black;
text-align: center;
}
.main-menu-dropdown li {
float: none;
display: inline-block;
margin-left: -4px;
}
.main-menu-dropdown li a {
background: black;
display: inline-block;
}
<div class="container">
<div class="col-md-12">
<ul class="main-menu">
<li><a href="#">First item</a></li>
<li>
<a class="has-dropdown" href="#">Second Item</a>
<ul class="main-menu-dropdown clearfix">
<li><a href="#">Sub item 1</a></li>
<li><a href="#">Sub item 2</a></li>
<li><a href="#">Sub item 3</a></li>
</ul>
</li>
<li><a href="#">Third Item</a></li>
<li><a href="#">Fourth Item</a></li>
</ul>
<div class="col-md-12">
I need the sub menu to span the width of the browser
</div>
</div>
</div>
あなたの説明はあまり明確ではありません。親要素が 'position:fixed、relative or absolute'を持つ場合、子要素の幅は親要素にのみ依存します。親要素の 'position'を削除すると、子は位置を持つ最も近い祖父母の幅を取ることになります。 Hrrrm ...これも明らかではありません。 –
あなたは間違っています。 '' width''は親に依存します。エレメントに '' position:static; ''(デフォルトのもの)があっても。 – ScientiaEtVeritas
親要素に明示的に設定された位置がない場合、位置が固定された子要素は、位置が設定された最も近い祖父母に対して相対的に配置されます。 –