ナビゲーションバーが正しく

-1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<body> 
 
    <div class="container"> 
 
    <header class="navbar navbar-expand navbar-light flex-column flex-md-row bg-faded rounded"> 
 
     <a class="navbar-brand mr-0 mr-md-2" href="/"><i class="fa fa-btc fa-2x" aria-hidden="true"></i></a> 
 

 
     <div class="navbar-nav-scroll"> 
 
     <ul class="navbar-nav bd-navbar-nav flex-row mt-1"> 
 
      <li class="nav-item active"> 
 
      <a class="nav-link" href="/">Home</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="/profile">Profile</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="/conditions">Conditions</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="/feedback">Feedback</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <a class="btn btn-default mb-3 mb-md-0 ml-md-3" href="http://twitter.com/btclottery2018" aria-label="Twitter"> 
 
     <i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i> 
 
     </a> 
 
    </header> 
 
    </div> 
 
</body>

は私のリンクが一緒に立ち往生しているが、彼らは距離でなければならず、Twitterのアイコンを右上隅にする必要があります。私の間違いは何ですか？私は何を間違えたのですか？

出典

2017-11-24 Victor

https://v4-alpha.getbootstrap.com/components/navbar/ – Magnum26

あなたのスタイルシートにこのスタイルを追加

.navbar-nav .nav-link{ 
padding-right:10px; 
}

出典

2017-11-24 08:14:49 in2d

その場合は、リンクがありますTwitterのアイコンはまだ残っています。 – Victor

あなたの.btnクラスにtext-align：center;でも試すことができます .btn { text-align：right; } – in2d

この試行は機能しません。 – Victor

-1

カスタムCSSでこれを試すことができます。

.nav-item{ 
    margin-right:7px; 
}

出典

2017-11-24 08:24:04 Super

はあなたのコードを1として、あなたはブートストラップCSSが含まれているが、デザイン、要素の幅、位置や間隔のためのいくつかのより多くのCSSを必要としています。

このようにしてください。余分なCSSを追加してください。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 

<body> 
    <div class="container"> 
    <header class="navbar navbar-expand navbar-light flex-column flex-md-row bg-faded rounded"> 
     <a class="navbar-brand mr-0 mr-md-2" href="/"><i class="fa fa-btc fa-2x" aria-hidden="true"></i></a> 

     <div class="navbar-nav-scroll"> 
     <ul class="navbar-nav bd-navbar-nav flex-row mt-1"> 
      <li class="nav-item active"> 
      <a class="nav-link" href="/">Home</a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" href="/profile">Profile</a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" href="/conditions">Conditions</a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" href="/feedback">Feedback</a> 
      </li> 
     </ul> 
     </div> 
     <a class="btn btn-default mb-3 mb-md-0 ml-md-3" href="http://twitter.com/btclottery2018" aria-label="Twitter"> 
     <i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i> 
     </a> 
    </header> 
    </div> 
</body>

エクストラCSSパート： -

.navbar-brand { 
    float:left; 
    width:10%; 
} 

header .navbar-nav-scroll { 
    float: left; 
    width:80%; 
} 

header .navbar-nav { 
    display: inline-block; 
    vertical-align: middle; 
    margin-top: 25px; 
} 

.navbar-nav li { 
    float:left; 
    padding:0px 20px; 
    list-style:none; 
} 

.navbar-nav>li a { 
    padding: 15px 20px; 
    color:#000000; 
    text-decoration:none; 
} 

.twitter-icon { 
    float: right; 
    margin-top: 25px; 
    width:10%; 
}

出典

2017-11-24 08:52:22

部分的な回答のみ。彼は自分が間違っていることを尋ねました。あなたは彼に何も説明のないコードを渡しただけです。それはSOの仕組みではありません。 – Rob

提案していただきありがとうございます。説明のために答えを編集しました。 –

あなたはここに3つのことを行う必要があります。

あなたはブランドロゴとULにおける個々のLi内部Twitterのアイコンを移動する必要がありますnavbarのすべての人が同じ行に来るようにします。
twitterアイコンを含むliに「navbar-right」のクラスを与え、右に移動する必要があります。
あなたは、クラス "NAV-項目" にパディングを与える必要があり、このような何か：

.nav-項目{ パディング：10pxの }

私は取り付けていますJSFiddleを参照してください。これがあなたの問題を解決することを願っています。

https://jsfiddle.net/dk4v76rw/

<div class="navbar-nav-scroll"> 
    <ul class="nav navbar-nav bd-navbar-nav flex-row mt-1"> 

    <!--Add the navbar-brand in the ul--> 
     <li> 
     <a class="navbar-brand mr-0 mr-md-2" href="/"><i class="fa fa-btc fa-2x" aria-hidden="true"></i></a> 
     </li> 

     <li class="nav-item active"> 
     <a class="nav-link" href="/">Home</a> 
     </li> 

     <li class="nav-item"> 
     <a class="nav-link" href="/profile">Profile</a> 
     </li> 

     <li class="nav-item"> 
     <a class="nav-link" href="/conditions">Conditions</a> 
     </li> 

     <li class="nav-item"> 
     <a class="nav-link" href="/feedback">Feedback</a> 
     </li> 

     <!--Add the icon as an li in the ul of the navbar and give it a class navbar-right--> 
     <li class="navbar-right"> 
     <a class="btn btn-default mb-3 mb-md-0 ml-md-3 right" href="http://twitter.com/btclottery2018" aria-label="Twitter"> 
     <i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i> 
     </a> 
    </li> 

    </ul> 
</div> 


</header>

出典

2017-11-24 08:59:07

Twitterアイコンは右端に表示され、リンクの直後に表示されます。 – Victor

ナビゲーションバーが正しく

答えて

関連する問題