Question

我希望我的文字能够拉伸到类似导航栏的整个宽度 this

目前就像this

我正在使用最新的bootstrap css，并且还有自己的自定义样式表。

这是我的HTML代码

<!doctype html>
<html>
    <head>
        <title>Title</title>
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
        <link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                <img src="img/logo.png" id="logo" class="img-responsive">
                </div>
                <div class="col-md-4" id="searchbox">
                    <div id="search-input">    
                        <div class="input-group col-md-12">
                            <input type="text" class="form-control input-lg"/>   
                        </div>        
                    </div>        
                </div>    
                <div class="col-md-1" id="search-button">
                    <span class="input-group-btn">
                        <button class="btn btn-info btn-lg" type="button">
                            <i class="glyphicon glyphicon-search"></i>
                        </button>
                    <span>
                </div>
                <div class="col-md-3" id="login-name">
                    <p> Logged in: John Smith </p>
                </div>
                <div class="col-md-1">
                    <a href="#"><i class="glyphicon glyphicon-cog" id="settings-cog"></i></a>
                </div>
            </div>
            <div class="row">
              <!-- Static navbar -->
             <nav class="navbar navbar-default navbar-static-top">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                  <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#about">Projects</a></li>
                    <li><a href="#contact">News</a></li>
                    <li><a href="#contact">Careers</a></li>
                    <li class="active"><a href="#contact">Contact Us</a></li>
                    <li><a href="#contact">About Us</a></li>
                    <li><a href="#contact">Case Studies</a></li>
                    <li><a href="#contact">Blog</a></li>
                    <li><a href="#contact">Customers</a></li>
                  </ul>
                </div><!--/.nav-collapse -->
             </nav>   
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
    </body>
</html>

Answer 1

以下是bootstrap-website的示例：

    /* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
    padding: 0;
}

.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}

.navbar .nav li {
    display: table-cell;
    width: auto;
    float: none;
}

.navbar .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .75);
    border-right: 1px solid rgba(0, 0, 0, .1);
}

.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}

.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

你试过那个吗？

如何运作很容易：将Navbar宽度设置为100％并应用display:table;，然后将内部元素设置为

width: auto;
display:table-cell;

如何使我的文本在引导程序中使用导航栏的整个宽度？

1 个答案: