Question

如果这是重复的话，我很抱歉，但我似乎无法找到问题的答案而且我在使用bootstrap时遇到了困难。

我正在尝试为网页制作3列布局。我希望每个侧边栏占据3列并填充该空间，并使中心内容区域占用6并填充空间。我在网上找到了一个例子并稍微调整了一下，但无法得到我想要的结果。

<div class="container-fluid" id="container">
<div class="row-fluid">
    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 span-3" >
        <div class="sidebar-nav-fixed affix" id="Left-Side">
            <div class="well">
                <ul class="nav ">
                    <li class="nav-header">Sidebar</li>
                    <li class="active"><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li class="nav-header">Sidebar</li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li class="nav-header">Sidebar</li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                </ul>
            </div>
            <!--/.well -->
        </div>
        <!--/sidebar-nav-fixed -->
    </div>
    <!--/span-->
    <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 span-6" id="Content">
        <div class="jumbotron">
            <h1>Hello, world!</h1>

            <p>
                This is a template for a simple marketing or informational website. It
                includes a large callout called the hero unit and three supporting pieces
                of content. Use it as a starting point to create something more unique.
            </p>
            <p>
                <a class="btn btn-primary btn-lg">Learn more »</a>
            </p>
        </div>

    </div>
    <!--/span-->
    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 span-3" id="Right-Side">
        <div class="sidebar-nav-fixed pull-right affix">
            <div class="well">
                <ul class="nav ">
                    <li class="nav-header">Sidebar</li>
                    <li class="active"><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li class="nav-header">Sidebar</li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li class="nav-header">Sidebar</li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                    <li><a href="#">Link</a>
                    </li>
                </ul>
            </div>
            <!--/.well -->
        </div>
        <!--/sidebar-nav-fixed -->
    </div>
    <!--/span-->
</div>
<!--/row-->

据我所知。我是使用bootstrap的新手，并不真正了解如何正确使用它。为了防止这件事，我正在用ASP.NET做这个项目。

Answer 1

您的代码是正确的，布局正在渲染。您的问题是侧栏上的＆＃34;词缀＆＃34; 类导致它们崩溃到内容的宽度。你需要这些侧边栏固定位置吗？如果没有，请删除＆＃34;词缀＆＃34; 类。否则，您必须为这些容器赋予宽度以填充3列间距。

尝试这样的事情......

.sidebar-nav-fixed {
width: 25%;
padding-right: 30px;
}

如何使用Bootstrap创建3列流体布局？

1 个答案: