html - 使 Bootstrap 列显示在一行中

Question

我以前使用过 Bootstrap，但我对列有疑问。我在 stackoverflow 上找不到答案。

我的列出现在两行而不是一行。

这是 fiddle :http://jsfiddle.net/n0syj75t/

HTML:

<div class="container-fluid">
<div class="header row">
    <div class="col-sm-1"></div>
    <div class="col-sm-3 logo">
        <a href="#"><img src="http://lorempixel.com/output/abstract-q-c-300-63-7.jpg"></a>
    </div>

    <div class="col-sm-8 header-menu">
        <div class="menu-menu-1-container">
            <ul id="menu-menu-1" class="menu">
                <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="#">Services</a></li>

                <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="#">How We Work</a></li>

                <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="#">About Us</a></li>

                <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="#">Blog</a></li>

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

</div><!-- end header row -->
</div><!-- end container-fluid -->

CSS:

.header {
    background-color: #f9f9f9;
    height: 110px;
}

.header ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    font-size: 0;
}

.header li, .header-menu a {
    display: inline-block;
    height: 100%;
}

.header-menu a {
    font-size: 14px;
    font-family: Open Sans;
    text-transform: uppercase;
    padding: 45px;
    color: #7f7f7f;
}

/* Bootstrap rows and columns --------------------------------------- */

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.col-sm-1 { 
    width: 8.33333333%; 
}

.col-sm-3 {
    width: 25%;
}

.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 { 
     float: left;
}

.col-sm-8 {
    width: 66.66666667%;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

Answer 1

因为你的图片和菜单都超过了宽度的100%，请在每个里面加上max-width:100%。此外，您没有加载完整的 Bootstrap ，您缺少 *{margin:0;填充:0； box-sizing:border-box}

js fiddle :http://jsfiddle.net/n0syj75t/1/

我已经添加了这个，请将其更改为 Bootstrap 类 .img-responsive 或添加您自己的类

img {
    max-width:100%;
}

.header-menu a {
    padding:25px; //The original is too big, will be pushed to a new row
}

此外，当窗口的宽度小于小尺寸时，您的列将扩展为行以便移动查看，如 Bootstrap 文档中所述:http://getbootstrap.com/css