似乎无法减少Bootstrap中的列宽

Question

我正尝试在bootstrap中创建一个在中心有一列的布局。我遇到的问题是，即使在使用class=“col sm-3”(或类似的东西)设置列宽之后，它仍然保持相同的大小。理想情况下，我希望行的宽度与下面代码中的图像相同。

尝试使用col-sm-x类，但不起作用。基本上我不想在下面的300x50图像周围留出空白。

<div class="container rounded" style="border:1px solid black">
        <div class="row">
                <div class="col-sm-3">
                        <center><img src="window_top_logo.jpg" width="300" height="50"></center>
                </div>
        </div>


</div>

基本上我不想在下面的300x50图像周围留出空白。

Answer 1

我只会使用col-sm-12，并使用您自己的css来定位它。

​

.image_container {
  width:300px;
  margin:0 auto;
}

<div class="container rounded" style="border:1px solid black">
        <div class="row">
                <div class="col-sm-3">
                      <div class="image_container">
                          <img src="https://via.placeholder.com/300x50" width="300" height="50">
                      </div>
                </div>
        </div>
</div>

​