我如何拉左和左右边的<ul>标签 - Bootstrap

时间:2015-11-22 14:09:45

标签: html css twitter-bootstrap navbar

如果我将class="nav nav-pills"放在class="pull-right"之前,那么它就会工作。那么,我如何才能解决这个问题。

<!DOCTYPE html>
    <html lang="en">
    <head>
       <style type="text/css">
              <?php include('style.css'); ?>       
       </style>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    </head>
    <body>

     <body>
        <div class="nav " >
          <div class="container">

            <ul  class="pull-left" class="nav nav-pills" role="tablist" >
              <li><a href="rub1ck.php">About Us</a></li>  
              <li><a href="#">Expertise</a></li>
              <li><a href="#">work</a></li>
            </ul>

            <ul  class="pull-right" class="nav nav-pills" role="tablist" >

              <li><a href="#">Blog</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="login.php"class="btn btn-default" role="button" >Login</a></li>

            </ul>
          </div>
        </div>

    <div class="container">
      <h2>Log in</h2>
      <form role="form">
        <div class="form-group">
          <label for="username">Username:</label>
          <input type="username" class="form-control" id="username" placeholder="Enter username">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd" placeholder="Enter password">
        </div>
        <div class="checkbox">
          <label><input type="checkbox"> Remember me</label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>

    </body>
    </html>

感谢您的帮助。 这是我第一次学习Html :))

3 个答案:

答案 0 :(得分:3)

您必须在同一个类标记中包含类名,如下所示:

 <ul  class="nav nav-pills pull-left" role="tablist" >

这种方式不会起作用

 <ul  class="pull-left" class="nav nav-pills" role="tablist" >

答案 1 :(得分:1)

你应该这样做https://jsfiddle.net/2Lzo9vfc/153/

<强> HTML

<ul class="nav nav-pills pull-left" role="tablist" >
  <li><a href="rub1ck.php">About Us</a></li>  
  <li><a href="#">Expertise</a></li>
  <li><a href="#">work</a></li>
</ul>

<ul class="nav nav-pills pull-right" role="tablist" >
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="login.php"class="btn btn-default" role="button" >Login</a></li>
</ul>

答案 2 :(得分:0)

你可以试试这样的课吗

class =&#34; pull-left nav nav-pills&#34;

据我所知,不支持在同一标签中包含两个类属性...