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

时间: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元素应该由.containercontainer-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属性。