html - 如何使此代码更具响应性？ - Thinbug

如何使此代码更具响应性？

时间：2015-04-01 19:26:51

标签： html css twitter-bootstrap responsive-design

我的响应能力有问题。在我的例子右侧有30 px空白的地方。我不知道怎么解决它。有人有什么想法吗？ http://jsfiddle.net/98p3webw/详细信息详细信息

    .imageeee { 

    position:absolute;
    max-width: 100%;


}
.logo{

    max-width: 100%;
    max-height: 100%;
}

 .max{
    width: 100%;

    position:relative;

 }
 .background{
    position:absolute;
    width: 100%;
    background-image: url("http://www.psdgraphics.com/file/colorful-triangles-background.jpg");
    height: 100%;
    background-size: cover;
 }


<body>


<div >
    <div class="row">
        <center>
            <img class="logo" src="http://i59.tinypic.com/dcbgiw.png">
        </center>
    </div>

        <div class="background col-md-12">

            <div class="max">


                <div class="col-md-2"></div>
                <div class="col-md-8 thumbnail" style="top: 40px;" >
                    <br><br><br><br><br><br><br><br>
                    <br><br><br><br><br><br><br><br>
                    <br><br><br><br><br><br><br><br>

                </div>
                <div class="col-md-2"></div>
            </div>
        </div>

</div>

1 个答案:

答案 0 :(得分：2)

您正在看到的15像素间距由Bootstrap的row类添加。

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

在Bootstrap中，.row元素应该由.container或container-fluid元素包装。

来自Boostrap文档的Grid system部分：

行必须放在.container（固定宽度）或.container-fluid（全宽）范围内，以便正确对齐和填充。

因此，将.row元素包裹在.container中可以解决您当前的问题。

JSFiddle Example

<div class="container">
    <div class="row">
        <center>
            <img class="logo" src="http://i59.tinypic.com/dcbgiw.png">
        </center>
    </div>
</div>

进一步阅读：

您可能需要阅读the Boostrap docs for the grid system，以便确保在其他地方正确使用它。另外，不推荐使用<center>标记，您应该使用CSS test-align属性。