Question

我遇到有关在导航条下添加按钮的问题，我的代码是

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
     <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="css/bootstrap-theme.min.css" rel="stylesheet">


       <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media 
       queries -->
       <    !-- WARNING: Respond.js doesn't work if you view the page 
       via file:// -->
       <!--[if lt IE 9]>
       `enter code here`<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
        html5shiv.js"></script>
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
        respond.min.js"></script>
  <![endif]-->
  </head>
  <body>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navbar-header">
  <a class="navbar-brand"  href="#">
  <img style="max-width:65px; margin-top: -15px; margin-left: -15px"
         src="image/b.bmp"> </a></div>
  <div>
  <p class="navbar-text"><font size=5><b>Gurgaon Police Admin Page</b> </font></p>
 </div>
 </nav>
 <p>
 <button type="button" class="btn btn-default btn-lg ">
  Add 
 </button>
 <button type="button" class="btn btn-default btn-lg active">
 Edit
 </button>
 <button type="button" class="btn btn-default btn-lg active">
 Delete
 </button>
 <button type="button" class="btn btn-default btn-lg active">
 Quiz Modification
 </button>
 </p>



 </body>

如何解决这个问题，因为按钮没有显示。是因为导航栏或其他东西请帮助我在这里使用wamp服务器进行输出分析

Answer 1

简单的解决方案是为p标签添加上边距。

working fiddle

   <body>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navbar-header">
  <a class="navbar-brand"  href="#">
      <img style="max-width:65px; margin-top: -15px; margin-left: -15px"src="image/b.bmp"/> </a></div>
  <div>
  <p class="navbar-text"><font size=5><b>Gurgaon Police Admin Page</b> </font></p>
 </div>
 </nav>


 <p style="margin-top:150px">
 <button type="button" class="btn btn-default btn-lg ">
  Add 
 </button>
 <button type="button" class="btn btn-default btn-lg active">
 Edit
 </button>
 <button type="button" class="btn btn-default btn-lg active">
 Delete
 </button>
 <button type="button" class="btn btn-default btn-lg active">
 Quiz Modification
 </button>
 </p>



 </body>

如何在导航栏下添加按钮

1 个答案: