Question

在笔记本电脑和平板电脑视图中，我的社交媒体图标都位于右上角，但是当我跳到手机视图时，单击切换后，它们会与主导航（房屋，联系人等）一起垂直列出，我希望他们保持在右上方的位置。我知道代码有问题（我正在使用bootstrap3），但是我不知道如何更改它。谢谢，因为我对此很陌生，所以可以有人帮助我。

平板电脑视图

手机视图

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href='https://fonts.googleapis.com/css?family=Allerta Stencil' rel='stylesheet'>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr")

</head>

<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li>@Html.ActionLink("Home", "Index", "Home")</li>
          <li>@Html.ActionLink("Bio", "About", "Home")</li>
          <li>@Html.ActionLink("Portfolio", "Portfolio", "Home")</li>
          <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
          <li><a href="https://www.linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
          <li><a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a></li>
          <li><a href="mailto:" target="_blank"><i class="far fa-envelope"></i></a></li>
        </ul>
      </div>
    </div>
  </div>

以下是用于手机视图的基本CSS：

@media all and (max-width: 767px) {

 .nav > li {             
     border-right: none;  
 }

 .navbar-nav > li > a {
     padding-top: 8px;
     padding-bottom: 15px;     
 }

.navbar-right > li > a {
    padding-top: 2px;
    padding-bottom: 4px;  
}

.nav {
    background-color: #008060;        
}

}

Answer 1

一种解决方法是将相同的li添加到navbar-nav并添加visible-xs-*，

然后将隐藏的xs添加到右侧导航栏上的那些。

课程； hidden-xs 和 visible-xs-* 都来自引导框架。

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href='https://fonts.googleapis.com/css?family=Allerta Stencil' rel='stylesheet'>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr")

</head>

<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="visible-xs-*"><a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
          <li class="visible-xs-*"><a href="https://www.linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
          <li class="visible-xs-*"><a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a></li>
          <li class="visible-xs-*"><a href="mailto:" target="_blank"><i class="far fa-envelope"></i></a></li>
          <li>@Html.ActionLink("Home", "Index", "Home")</li>
          <li>@Html.ActionLink("Bio", "About", "Home")</li>
          <li>@Html.ActionLink("Portfolio", "Portfolio", "Home")</li>
          <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="hidden-xs"><a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
          <li class="hidden-xs"><a href="https://www.linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
          <li class="hidden-xs"><a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a></li>
          <li class="hidden-xs"><a href="mailto:" target="_blank"><i class="far fa-envelope"></i></a></li>
        </ul>
      </div>
    </div>
  </div>

Answer 2

在看不到CSS的情况下，很难进行故障排除，但是“右上角”不是可折叠导航栏的一部分，因此将社交图标嵌套在navbar-collapse collapse中不会为您带来结果想要。

  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li>@Html.ActionLink("Home", "Index", "Home")</li>
      <li>@Html.ActionLink("Bio", "About", "Home")</li>
      <li>@Html.ActionLink("Portfolio", "Portfolio", "Home")</li>
      <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
      <li><a href="https://www.linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
      <li><a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a></li>
      <li><a href="mailto:" target="_blank"><i class="far fa-envelope"></i></a></li>
    </ul>
  </div>

在未看到CSS的情况下，我不会进行基于假设的更改，但我建议您为社交图标创建一个新的div，并使用flexbox左右对齐。

如何在手机视图的右上方显示社交媒体图标？

2 个答案: