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

Question

我的响应速度有问题。在我右侧的示例中，有 30 像素的空白位置。我不知道他妈的怎么修。有人知道吗？ 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>

Answer 1

您看到的 15 像素间距是由 Bootstrap 的 row class 添加的。

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

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

来自 Boostrap 文档的 Grid system 部分：

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

因此，将 .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 so you can make sure you use it correctly in other places. Also, the <center> tag is deprecated, You should use the CSS test-align 属性。

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

How do I make this code more responsive?

html

css

responsive-design

twitter-bootstrap

来自 Boostrap 文档的 Grid system 部分：

JSFiddle Example:

进一步阅读：