Question

我已经把头撞到墙上好几个小时了，到处寻找解决方案......所以现在我需要发帖，看看是否有人可以提供帮助。我在1列和文本1列中有一个图像。

我希望图像右对齐，文本左对齐。

然而，当我这样做时，每列之间有很多空间。

我试图删除填充但它不起作用。此外，当视口处于移动大小时，图像需要在断点之后居中。

当我使用<div class="col-md-6 text-right">时，图片会在移动设备上显示在右侧。有任何想法吗？谢谢!!!

 <!-- jumbotron  start-->
  <div class="jumbotron">
    <div class="container" >
      <div class="row">
        <div class="col-md-6 text-right"> <img src="images/cover-lg.jpg" alt="Cover"> 
          </div>
        <div class="col-md-6 title-xs-hide">
          <p class="title" ><i>MyTitle</p>
          <h1>Year In Review 2017</h1>
          <p><a class="btn btn-primary btn-lg" style="background-color:#ed8e20; border-radius:5px; border-color: #ed8e20;"  href="#" role="button">Sign In To Access Your Copy</a></p>
          <br>

          <p class="account">Don't have an account? <br>
            <a href="#">Create a free account for immediate access.</a></p>
        </div>
      </div>
    </div>
  </div>
  <!-- jumbotron  end-->

Answer 1

您可以使用text-right。

，而不是使用text-lg-right

此外，您可以使用pr-0和pl-0类删除装订线空间到相应的部分。

Codepen

Answer 2

您可以将类text-md-right text-center添加到带有图像的列中，使其在移动设备上居中，并在某个断点后右对齐。

如果您想要删除空格，只需在两列上设置padding: 0即可。

以下是示例： https://codepen.io/apieceofbart/pen/RxZLzx

Answer 3

将col-md-6的填充设置为

喜欢

app.use('/build', express.static(path.join(`${__dirname}/client`)));

在Bootstrap 4中对齐两列中的内容

3 个答案: