Question

这可能是一个简单的CSS技巧。我需要一个警报，以便在其他图标之间的主图标之后安装在导航栏内。警报需要适合给定的位置。

实施例：桌面

移动

目前的外观：

影响导航栏的CSS：

    .navbar {
    margin-bottom: 0;
    background-color: #396B99;
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
    font-family: Montserrat, sans-serif;
}

    .navbar li a, .navbar .navbar-brand {
        color: #fff !important;
    }

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: #396B99 !important;
    background-color: #fff !important;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}

当前导航栏HTML：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#myPage"><span class="glyphicon glyphicon-home logo-inverse"></span></a>
            <!-- Where the alert should go? -->
            <div class="alert alert-info">
                <strong>Service Alert</strong> There is something wrong, and we need to alert you about it.
            </div>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right text-uppercase">
                <li><a href="#about" data-toggle="collapse" data-target=".navbar-collapse.in">about</a></li>
                <li><a href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.in">products</a></li>
                <li><a href="#contact" data-toggle="collapse" data-target=".navbar-collapse.in">contact</a></li>
                <li><a href="#recentnews" data-toggle="collapse" data-target=".navbar-collapse.in">recent news</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

希望这会有所帮助，将快速引导菜单与其中的警报放在一起

＆＃13;

    .alert-float{
        height: auto;
        max-width: 500px;
        top: 0;
        margin: 0 auto;
    }






/*the following just removes mobile scaling so I can properly show you the alert*/
.navbar-collapse.collapse{
      display: block !important;
    }
    
    .navbar-nav>li, .navbar-nav{
      float: left !important;
    }
    
    .navbar-nav.navbar-right:last-child{
      margin-right: -15px !important;
    }
    
    .navbar-right{
      float: right !important;
    }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


    <nav class="navbar navbar-default">
       <div class="container-fluid">
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
             <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
             </ul>
             <div class="alert-float" style=" position: absolute; top: 0; left: 130px; right: 30px; z-index: 9999;width: 65%">
                <div class="alert alert-success alert-dismissible" role="alert">
                   <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                   Test
                </div>
             </div>
             <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
             </ul>
          </div>
          <!-- /.navbar-collapse -->
       </div>
       <!-- /.container-fluid -->
    </nav>

＆＃13;

Answer 2

您只需要调整CSS样式以使其适合您想要的位置。主要是显示外观应该是内嵌块。

之后，您可能需要设置最大宽度，以便它不会溢出到导航。也可能需要一些媒体查询。

或尝试向左浮动，看看它是什么样的。

你能成为一名JSFiddle吗？

Answer 3

JavaScript可能有用。只需添加另一个链接并隐藏它。我在本例中使用了一个错误来显示警报。

<li><a href="#alert" id="alert" data-toggle="collapse" data-target=".navbar-collapse.in">Alert!</a></li>

JavaScript示例：

$("#alert").hide();

var error == false;

if (error == true){
$("#alert").show();
}

Answer 4

您可以使用navbar-text类添加发表评论的提醒你可以看到它here in action

class B
{
public:
  inline B() {}
  inline B(std::function<int(int)> f) : myfunc{ f } {}
  void setfunction(std::function<int(int)> f) { myfunc = f; }
  void print(int number) { std::cout << myfunc(number) << std::endl; }
private:
  std::function<int(int)> myfunc;
};

class A
{
public:
  A(int myint) :a{ myint } {
    b.setfunction([this](int a) {
      return g(a);
    }
    );
  }
  int g(int) { return a; }
  void print() { b.print(a); }

private:
  B b;
  int a;
};

Bootstrap HTML适合警报进入导航栏

4 个答案: