Question

我有以下代码：

<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图标应该在右上角。我的错是什么？我做错了什么？

Answer 1

根据你的代码，你已经包含了bootstrap 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%;
}

Answer 2

您可以在自定义CSS中尝试此操作

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

Answer 3

你需要在这里做三件事：

您需要在导航栏的ul中移动个别li内的品牌徽标和推特图标，以便所有人都能在同一行中。
你需要给包含twitter图标的li一个＆＃34; navbar-right＆＃34;所以它向右移动。
您需要为班级＆＃34; nav-items＆＃34;提供填充，如下所示：

.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>

Answer 4

在样式表中添加此样式。

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

导航栏无法正确显示

4 个答案: