Question

我有一个徽标，我希望将它放在第一行的容器右侧。首先我写了这段代码：

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <img src="../Images/logo.png" alt="Logo"/>
        </div>
        <div class="col-md-9">
        </div>
    </div>
</div>

并且徽标显示在第一行的左侧，带有一些边距。现在我将pull-right课程添加到我的div，如下所示：

<div class="col-md-3 pull-right">
     <img src="../Images/logo.png" alt="Logo"/>
</div>

并且徽标与浏览器窗口的右侧对齐，没有任何边距。我如何将徽标放在第一排的右侧，如左侧？

由于

Answer 1

如果要将图像拉到右侧，则需要拉动图像，而不是行：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <img src="../Images/logo.png" alt="Logo" class="pull-right"/>
        </div>
        <div class="col-xs-6">
          Column 2
        </div>
    </div>
</div>

如果您希望列切换位置而不更改<div>的顺序，则应使用.col-*-pull-* and .col-*-push-*。他们会尊重栏目排水沟：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-xs-push-6">
            <img src="../Images/logo.png" alt="Logo"/>
        </div>
        <div class="col-xs-6 col-xs-pull-6">
          Column 2
        </div>
    </div>
</div>

你当然可以将两者结合起来。

（顺便说一下，不要在最终设计中将alt-text设置为“Logo”，将其设置为有用的东西，如公司名称）。

在容器内向右拉图像

1 个答案: