Question

我在row > col-md-6内有一张图片。

我希望将图像移到其列的右侧。

我创建了以下两个类 - .pos1和.pos2

.pos1 {
    position: relative;
}
.pos2 {
    position: absolute;
    right: 0px;
}

在使用这些类时，图像会从行中出来，而且不再响应。

html代码如下：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>My Faourite App</title>
</head>

<body>
    <div class="container">
        <div class="row">
                <h1 class="title">MY FAVORITE APP</h1>
        </div>
        <div class="row">
            <div class="col-md-6 pos1">
                <img src="http://placehold.it/300x300" class="img-responsive pos2" alt="hello">
            </div>
            <div class="col-md-6">
                <div>In ac ipsum quis turpis adipiscing commodo. Mauris fermentum quam.<div>
            </div>
        </div>
    </div>
</body>
</html>

请说明我做错了什么。我在IE12和Chrome上都尝试了这个

Answer 1

不要使用position: absolute它（几乎）总是有问题。尝试使用引导类pull-right和clearfix而不是.pos1和.pos2。右拉类在图像和图像的父级上的clearfix类上进行。检查一下是否有效。

Answer 2

你可以使用这个类：

.row {position:relative;overflow:hidden;}
.pos1 {position:absolute; right:0; height:100%;}
.pos1 img {position:absolute; right:0; height:100%;}

FIDDLE

Answer 3

删除两者：

.pos1 {
    position: relative;
}
.pos2 {
    position: absolute;
    right: 0px;
}

由于.col-md-6已经position:relative，因此不需要，您可以使用.pull-right之类的引导辅助类。

Answer 4

虽然有一个拉动右方法的技巧。当你小于col-ms-6时，它就像浮动图形。使文字环绕它。最简单的方法就是添加img{margin-left:auto;}并忘记多余的css。

JSFiddle

此外，如果您希望所有其他元素与container对齐，则需要放置某种col-{size}-{number}，否则您的边距将不会排列。

<div class="container">
    <div class="row">
        <!--Adding 'col-md-12' allows the margins to line up with other 'col-' items-->
        <div class="col-md-12">
             <h1 class="title">MY FAVORITE APP</h1>

        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <img src="http://placehold.it/300x300" class="img-responsive" alt="hello" style='margin-left:auto;' />
        </div>
        <div class="col-md-6">
            <div>In ac ipsum quis turpis adipiscing commodo. Mauris fermentum quam.</div>
        </div>
    </div>
</div>

图像出来了

4 个答案: