どのように応答するには、navbarにリンクを配置する

-1

私は現在、CSSにいくつかの問題があります。私はいくつかの水平リンクと最後にドロップダウンメニューを持つnavbarに取り組んでいます。どのように応答するには、navbarにリンクを配置する

小さな画面では、リンクがハンバーガーメニューに崩壊します。私がしようとしているのは、リンクが崩壊したときに、ドロップダウンボタンの隣にある最後のリンクをドロップダウンボタンの後に置くことです。ここで

は、それが時に沈胴し、ドロップダウンオープンして次のようになります。

これは、現時点では崩壊のようにそれが見えるものです：

そして、これがありますどのように見たいですか：

これを行う方法がわかりません。私は右に "プロフィール名"を浮動しようとしています、そして、それは "IMG"の右にそれ自身を置きますが、ちょうど右に向かうようにちょっとした作品です。私はそれを "IMG"にぴったりと置いてください。適切な場所に埋め込むことで応答性が損なわれます。

私は応答とドロップダウンメニューにブートストラップを使用しています。私はこのためにメディアクエリを使用しなければならないと仮定します。

誰かがこれを行う方法を知っていれば、私はどんなヒントにも感謝しています！ここ

はコード

<ul> 
 
    <li class="horizontal-align">Link 1</li> 
 
    <li class="horizontal-align">Link 2</li> 
 
    <li class="horizontal-align">Profile name</li> 
 
    <li class="horizontal-align"> <img class="Profile-img" /> 
 
    <ul> 
 
     <li class="dropdown-li">Link 3</li> 
 
     <li class="dropdown-li">Link 4</li> 
 
     <li class="dropdown-li">Link 5</li> 
 
    </ul> 
 
    </li> 
 
</ul>

ハンバーガーモードで別の日のための問題である一方で、オープンドロップダウンを保っています。

出典

2017-12-07 binerkin

試したコードスニペットはありますか？ HTML、CSSなど。 –

あなたのコードを含めてください。できればスニペット/デモを作成できますか？ありがとう – sol

申し訳ありません、ご了承ください！ HTMLの簡略化されたバージョンが役立つ場合、ここにあります。 – binerkin

ので、単純にこのように書く

<li class="horizontal-align"> <img class="Profile-img" src="https://www.w3schools.com/w3css/img_fjords.jpg"/>Profile name

.Profile-img { 
 
    width: 20px; 
 
    height: 10px; 
 
}

<ul> 
 
    <li class="horizontal-align">LinkLink 1</li> 
 
    <li class="horizontal-align">Link 2</li> 
 
    <li class="horizontal-align"> <img class="Profile-img" src="https://www.w3schools.com/w3css/img_fjords.jpg" />Profile name 
 
    <ul> 
 
     <li class="dropdown-li">Link 3</li> 
 
     <li class="dropdown-li">Link 4</li> 
 
     <li class="dropdown-li">Link 5</li> 
 
    </ul> 
 
    </li> 
 
</ul>

出典

2017-12-07 10:39:55 Bhargav

私はそれが非転化時の状態に保ちたいと思います。 – binerkin

ブートストラップ4公式のマニュアルを参照してください。私は昨日navbarのためにそれを使用しました。あなたのコード内のブートストラップ4を含めたい場合は
https://v4-alpha.getbootstrap.com/components/navbar/
、これが解決される

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

出典

2017-12-07 10:42:21

私はブートストラップ4にアップグレードしたいと思っていますが、製品のオーナーがブートストラップ3を使用するようにリクエストしています。 – binerkin

navbar there問題なく、私はブートストラップ3の例も使用しましたが、うまくいきました。私が正しく覚えていれば、W3schoolsにはまだブートストラップ3の例があります。 https://www.w3schools.com/bootstrap/bootstrap_navbar.aspにチェックしてください –

headタグにこれを追加します。解決策は恥ずかしがらず簡単でした。私はdivにプロファイル名とimgをラップしてwidth：fit-contentに設定しました。次に、メディアクエリでプロファイル名のフロートを右に変更すると、imgのすぐ隣に配置されます。

回答ありがとうございます！

出典

2017-12-07 12:29:59 binerkin

どのように応答するには、navbarにリンクを配置する

答えて

関連する問題