Question

对于快速的几个小时，我一直试图用Bootstrap和HTML来解决这个问题。我想将图像对齐在屏幕的角落，但似乎它不想按我的方式工作。我没有任何CSS代码，所以这就是为什么我要弄清楚如何做到这一点。我已经尝试过拉类，但它们似乎也无济于事。

这是HTML

<div class="shared">
    <div class="container">
        <div class="col-md-6">
            <p>some stuff</p>
        </div>

        <div class="col-md-6">
            <img src="img/pexels-photo-325223.jpeg">
        </div>
    </div>
</div>

以下是我想要的例子，请看右边的空格？我想通过移动侧面的图像来填充它。

EXAMPLE

我很感激能帮助我的人:)！

Answer 1

解决方案1：您可以在col-md-6上使用text-right。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="shared">
  <div class="container">
    <div class="col-md-6">
      <p>some stuff</p>
    </div>

    <div class="col-md-6 text-right">
      <img src="https://dummyimage.com/200x400/000/fff">
    </div>
  </div>
</div>

解决方案2：您可以在col-md-6上使用pull-right

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="shared">
  <div class="container">
    <div class="col-md-6">
      <p>some stuff</p>
    </div>

    <div class="col-md-6 pull-right">
      <img src="https://dummyimage.com/200x400/000/fff">
    </div>
  </div>
</div>

解决方案3：对于requiremnt，添加一个类nopadding + text-right和一行自定义css来实现您的结果。

.shared .nopadding{ padding:0px !important}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="shared ">
  <div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
      <p>some stuff</p>
    </div>

    <div class="col-xs-6 nopadding text-right">
      <img src="https://dummyimage.com/200x400/000/fff">
    </div>
    </div>
    
  </div>
</div>

Answer 2

在图片标记上使用pull-right类，如下所示。

<div class="shared">
    <div class="container">
        <div class="col-md-6">
            <p>some stuff</p>
        </div>

        <div class="col-md-6">
            <img class="pull-right" src="img/pexels-photo-325223.jpeg">
        </div>
    </div>
</div>

这会将您的图像推向右侧。

认为这会对你有帮助。

Answer 3

首先，您的列周围需要.row：

<div class="shared">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <p>some stuff</p>
      </div>

      <div class="col-md-6">
        <img src="img/pexels-photo-325223.jpeg">
      </div>
    </div>
  </div>
</div>

接下来，您需要将图像设置为内联块并将列文本对齐，或者将图像设置为显示块并向右浮动。

如果您只能使用Bootstrap的内置规则，请在图片上设置class="pull-right"。

Answer 4

<div class="shared">
        <div class="container">
            <div class="col-md-6">
                <p>some stuff</p>
            </div>

            <div class="col-md-6 pull-right">
                <img src="img/pexels-photo-325223.jpeg">
            </div>
        </div>
    </div>

HTML / Bootstrap - 在屏幕的一角对齐图像

4 个答案: