Question

当我刚刚习惯了引导框架时，我理解它的功能，但我无法得到我想要的结果。

简单地在一行上我想并排2个部分。首先，我想要一个包含nav nav-tabs的div，它跨越8列，然后我想要一个旁边的div，其中包含一些列为span 4的文本。

以下是我的代码

<div class= "row-fluid" id="projectTabs">
    <div class="span8">
            <br>
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#">Favourites</a></li>
                <li><a data-toggle="tab" href="#">Customer</a></li>
                <li><a data-toggle="tab" href="#">Non-Chargeable</a></li>
                <li><a data-toggle="tab" href="#">Global</a></li>
            </ul>
     </div>
    <div class="span4">
        This text is enclosed in a box.

    </div>
</div>

我还包括以下内容：

<div class="container-fluid">
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">

我在这里遗漏了什么吗？当我使用这个时，我留下导航标签下面的文字。非常感谢任何建议。

Answer 1

你所指的css是bootstrap v3.2.0，它改变了类名结构语法。

这是正确的语法：

<div class= "container" id="projectTabs">
    <div class="row">
    <div class="col-md-8">

            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#">Favourites</a></li>
                <li><a data-toggle="tab" href="#">Customer</a></li>
                <li><a data-toggle="tab" href="#">Non-Chargeable</a></li>
                <li><a data-toggle="tab" href="#">Global</a></li>
            </ul>
        </div>
    <div class="col-md-4">
        This text is enclosed in a box.

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

小提琴：http://jsfiddle.net/rahulrulez/8pjyt302/embedded/result/

Bootstrap响应式设计问题

1 个答案: