Question

我有一个导航栏，我想在其中添加一些文字，但文本总是在导航栏区域中结束。我确保所有的div标签和ul标签都已关闭，但仍然没有运气..

          <!-- CSS -->
          <link rel="stylesheet" href="css/main.css">
          <link rel="stylesheet" href="css/bootstrap.css">
          <link rel="stylesheet" href="css/font-awesome.css">

          <!-- JS -->
          <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
            <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
          <script type="text/javascript" src="js/custom.js"></script>

       <style>
       /* Override Some CSS Rules */
       body { background: black; color: green; }
       input[type=text] { color: ligthblue; font-family: "raleway"; background-color: #eee; }
         </style>
        <div id="top"></div>
       </head>
       <body>

       <div class="navbar navbar-default navbar-fixed-top"> <!-- START: navbar -->
       <div class="container"> <!-- START: container1 -->
       <div class="row"> <!-- START: row1 -->

       <a href="member" class="navbar-brand">Company</a> <!-- Logo -->

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navheader"> <!-- START: navbutton -->
                <i class="icon-bar"></i>
                <i class="icon-bar"></i>
                <i class="icon-bar"></i>
            </button> <!-- END: navbutton -->


        <div class="collapse navbar-collapse navheader"> <!-- START: navheader collapse -->       
           <ul class="nav navbar-nav navbar-right"> <!-- START: navbar ul class -->

                    <li><a href="member">Home</a></li>
                    <li><a href="#add">Add</a></li>
                    <li><a href="#edit">Edit</a></li>
                    <li><a href="#delete">Remove</a></li>



            </ul> <!-- END: navbar ul class -->
          </div> <!-- END: navheader collapse -->
          </div> <!-- END: row1 -->
          </div> <!-- END: container1 -->
          </div> <!-- END: navbar -->

<!-- This div shows up in navbar area :S -->
       <div class="container">
       <div class="row">
                <div class="col-md-4 col-md-offset-3">
    <font color="green">Hey there!</font>
                </div>
        </div>
        </div>

       </body>
    </html>

请帮忙。我想学习规则和我做错了什么。另外，我希望文本居中，因此<div class="col-md-4 col-md-offset-3">是最佳选择吗？

提前谢谢！

Answer 1

使用cols对文本进行居中不是一个好主意。只需使用col-md-12，添加一些其他类并将其设置为text-align：center;就这么简单：D

对于导航栏问题 - 由于菜单已修复，您需要设置一些填充，因为页面本身位于固定元素后面...

body {
   padding-top: 50px;

 }

Answer 2

您可以使用预定义的文本中心＆＃39; Bootstrap中的类，用于居中元素中的任何文本。至于你的菜单，你需要弄清楚它的高度，并在填充物中添加至少这个量。在下面的示例中，导航栏的高度为51px，主体上的填充为70px。

body {
  padding-top: 70px;
}

示例JSFiddle - http://jsfiddle.net/9ba73yhm/3/

引导程序中的容器和行规则

2 个答案: