Bootstrap v3.3.0列太宽

时间:2014-11-04 22:23:57

标签: html css twitter-bootstrap

我对这个问题感到非常沮丧,搜索了很多选项,没有找到工作,也没有心思进一步思考它。

相关网站为https://flix-c9-airbusai342.c9.io/

在这里,我在移动设备中的列太宽了问题。是的,它们正在堆叠,但不确定是什么导致它太宽。

以下是相关区域代码的直接摘要。类.stats仅background-color: #D8D8D8;用于更改背景颜色。

<section class="stats">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-md-4" align="center">
            <span class="fa-stack fa-4x">
                <i class="fa fa-circle fa-stack-2x turquoise"></i>
                <i class="fa fa-code fa-stack-1x fa-inverse"></i>
            </span>
            <h2>Professional Coding</h2>
            <span class="text-muted"><p>A team of experienced web developers are ready to give you the best quality code available to be provded for you. <b>Each</b> and <b>every</b> time.</p></span>
        </div>
        <div class="col-md-4" align="center">
            <span class="fa-stack fa-4x">
                <i class="fa fa-circle fa-stack-2x turquoise"></i>
                <i class="fa fa-bolt fa-stack-1x fa-inverse"></i>
            </span>
            <h2>Dedicated Team</h2>
            <span class="text-muted"><p>Nothing's perfect. Even us. Thus, our dedicated team is ready to help you whenever you need it, even if it means sacrificing leasure time.</p></span>
        </div>
        <div class="col-md-4" align="center">
            <span class="fa-stack fa-4x">
                <i class="fa fa-circle fa-stack-2x turquoise"></i>
                <i class="fa fa-mobile fa-stack-1x fa-inverse"></i>
            </span>
            <h2>Mobile compatible</h2>
            <span class="text-muted"><p>We know the new trends of websites. Meeting popular demand, our websites by default look great on any device across. Even this website.</p></span>
        </div>
    </div>
</div>

我公开允许您查看网站的页面来源。

感谢您的帮助;我的沉闷心灵正在受苦。 :)

1 个答案:

答案 0 :(得分:3)

.section

上的最小宽度为960px

删除它将解决很多问题。如果您不希望内容延伸到窗口的整个宽度,请改用max-width: 960px;。否则,只需删除最小宽度960px

删除.row-fluid并使用.row

删除那些旧东西的align="center"

在您想要居中的东西的父项上使用.text-center(假设它是内联或内联块元素)

对任何块元素使用.center-block(例如.img-responsive)。