Html 引导中的容器和行规则_Html_Twitter Bootstrap

Html 引导中的容器和行规则

html twitter-bootstrap

Html 引导中的容器和行规则,html,twitter-bootstrap,Html,Twitter Bootstrap,我有一个导航栏，我想在下面添加一些文本，但文本总是在导航栏区域结束。我确保我所有的div标签和ul标签都已关闭，但仍然没有运气  <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="styleshe

我有一个导航栏，我想在下面添加一些文本，但文本总是在导航栏区域结束。我确保我所有的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>

请帮忙。我想知道规则和我做错了什么。我还希望文本居中，所以这是最好的选择

提前谢谢你

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

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

body {
   padding-top: 50px;

 }

您可以在引导中使用预定义的“文本中心”类将元素中的任何文本居中。至于你的菜单，你需要计算出它的高度，并在身体上添加至少那个数量的填充物。在下面的示例中，导航栏的高度为51px，主体上的填充为70px

body {
  padding-top: 70px;
}

示例JSFIDLE-

谢谢！但如果不是文本而是整个div呢？我还能使用文本中心吗？MD12不会拉伸它吗？