Question

我连续有两个列，并且想将第一个列（照片）居中，而不是第二个列和子内容居中。当在小型设备上查看时，它是用于响应式布局。但是，为了这样做，我将不得不在父行上使用text-center类，但是我不希望第二列的内容居中。

这里是布局在全屏和小屏幕上的外观照片。 https://imgur.com/a/YBVIpjR

有任何解决方法的想法吗？

<div class="row p-3">
  <div class="col border">
    <h3 class="text-center">Recent Posts</h3>
    <div class="row">
      <div class="col-auto">
        <img src="img/guy.jpg" alt="topic" class="blog-post">
      </div>
      <div class="col-md blog-box">
        <p class="blog-post-topic">Privary & Security</p>
        <p class="blog-post-title">Guarding Against Computer Malware</p>
        <p class="blog-post-excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit</p>
        <button type="button" class="btn btn-info btn-blog mb-4">Read More</button>
      </div>
    </div>
  </div>
</div>

std::optional

Answer 1

您要在父margin: 0 auto上设置.col-auto：

.blog-topics {
  max-width: 180px;
  max-height: 180px;
}

.blog-post {
  max-width: 250px;
  max-height: 250px;
  margin-top: 5px;
}

.blog-box {
  max-width: 700px;
}

.blog-post-topic {
  color: #17a2b8;
  font-size: 14px;
  margin: 0px;
  padding: 0px;
}

.blog-post-title {
  text-transform: uppercase;
  font-weight: 600;
  margin: 0px 0px 8px 0px;
  padding: 0px;
}

.blog-post-excerpt {
  font-size: 16px;
  color: #686868;
  margin: 0px 0px 10px 0px;
  padding: 0px;
}

.col-auto {
  margin: 0 auto;
}

@media (max-width: 540px) {
  .btn-blog {
    display: block;
    width: 100%;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="row p-3">
  <div class="col border">
    <h3 class="text-center">Recent Posts</h3>
    <div class="row">
      <div class="col-auto">
        <img src="https://placehold.it/100" alt="topic" class="blog-post">
      </div>
      <div class="col-md blog-box">
        <p class="blog-post-topic">Privary & Security</p>
        <p class="blog-post-title">Guarding Against Computer Malware</p>
        <p class="blog-post-excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit</p>
        <button type="button" class="btn btn-info btn-blog mb-4">Read More</button>
      </div>
    </div>
  </div>
</div>

Answer 2

这可以通过Bootstrap类完成。而不是在所有断点上使用col-auto（这是问题的根源），而只能在更高的断点上使用col-auto（我选择了col-md-auto）。这样一来，在堆叠时，图像列将占据全部可用宽度，并允许我们将图像居中放置。

<div class="row p-3">
        <div class="col border">
            <h3 class="text-center">Recent Posts</h3>
            <div class="row">
                <div class="col-md-auto d-flex justify-content-center">
                    <img src="http://via.placeholder.com/250" alt="topic" class="blog-post">
                </div>
                <div class="col-md blog-box">
                    <p class="blog-post-topic">Privary & Security</p>
                    <p class="blog-post-title">Guarding Against Computer Malware</p>
                    <p class="blog-post-excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit</p>
                    <button type="button" class="btn btn-info btn-blog mb-4">Read More</button>
                </div>
            </div>
        </div>
    </div>

在将col居中而不在父行中将其他内容居中时出现问题

2 个答案: