如何将图片标签放入Bootstrap网格中？

Question

我是CSS和Bootstrap的初学者，并且有一份带有以下说明的文档：

Throughout the enitre website a 12 column grid is used. This allows for maximum flexibility and to serve all devices available. Within the 12 columns grid
The content is placed within the 12 column grid (1). The grid is scaled between two fixed margins (2). Grid and margins fill the entire screen width minus the width of the main navigation (3).

为此编写以下内容：

<div class="row">

            <div class="col-md-1 col-sm-1 col-lg-1">A</div>
            <div class="col-md-1 col-sm-1 col-lg-1">B</div>
            <div class="col-md-1 col-sm-1 col-lg-1">C</div>
            <div class="col-md-1 col-sm-1 col-lg-1">D</div>
            <div class="col-md-1 col-sm-1 col-lg-1">E</div>
            <div class="col-md-1 col-sm-1 col-lg-1">F</div>
            <div class="col-md-1 col-sm-1 col-lg-1">G</div>
            <div class="col-md-1 col-sm-1 col-lg-1">H</div>
            <div class="col-md-1 col-sm-1 col-lg-1">I</div>
            <div class="col-md-1 col-sm-1 col-lg-1">J</div>
            <div class="col-md-1 col-sm-1 col-lg-1">K</div>
            <div class="col-md-1 col-sm-1 col-lg-1">L</div>

        </div>

现在想要将图片标签放入A div中：

<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg"/>

但是现在页面不具有响应性，希望图片可以显示在<div class="row">的中心位置，我该怎么解决呢？谢谢大家。

- chert chertopert

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Luiz Henrique

@LuizHenrique 谢谢，我可以为 <div class="Row"> 设置 margin-left 吗？ - chert chertopert

尝试一下我刚刚在这里发布的代码。我检查过了，它可以正常工作。图像会自适应地保持在列A的宽度内。但是你想把图像放在屏幕中央吗？ - Luiz Henrique

Answer 1

嗯，您的问题不是很清楚。请查看此Fiddle，并更详细地阐述您想要做什么，或者向我们发送设计或任何可帮助的视觉材料。

干杯

img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

<div class="row">
  <div class="col-sm-1">A</div>
  <div class="col-sm-12">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS2Xjhc-NPN5UAWzKdY3Kpl29Tyt-zCC8aOd3Gez8i2zrF3BS9bSQ" />
  </div>
  <div class="col-sm-1">B</div>
  <div class="col-sm-1">C</div>
  <div class="col-sm-1">D</div>
  <div class="col-sm-1">E</div>
  <div class="col-sm-1">F</div>
  <div class="col-sm-1">G</div>
  <div class="col-sm-1">H</div>
  <div class="col-sm-1">I</div>
  <div class="col-sm-1">J</div>
  <div class="col-sm-1">K</div>
  <div class="col-sm-1">L</div>
</div>

- Negin

---

那是真的开始了，但还有另一个问题，我该如何将margin-left和margin-right设置为<div class="row">？ - chert chertopert

@chertchertopert 这不是W3Schools。 - Emobe

Answer 2

请查看新的示例，我真的不知道你想做什么，但你可以尝试很多列，并且通常不需要添加任何边距！但如果因为任何原因你想要添加边距，你可以定义一个类（你可以随意命名），然后你可以定义边距的数量：

在这个例子中，我称之为“asset”：你可以这样写它：

    .asset {
      margin-right: 20px;
      margin-left: 20px;
    } 

或者这样写：

    .asset {
       margin: 0 10px 20px 30px;
     }

    0    ===> shows margin-top(for zero there is no need to add "px")
    10px ===> shows margin-right
    20px ===> shows margin-bottom
    30px ===> shows margin-left

now you can write :

    .asset {
       margin : 0 20px 0 20px;
    }

<div data-lang="js" data-hide="false" data-console="true" data-babel="false" class="snippet">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    img {
        display: block;
        margin-left: auto;
        margin-right: auto
    }

<div class="row">
  <div class="col-sm-1">A</div>
  <div class="col-sm-12">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS2Xjhc-NPN5UAWzKdY3Kpl29Tyt-zCC8aOd3Gez8i2zrF3BS9bSQ" />
  </div>
  <div class="col-sm-1">B</div>
  <div class="col-sm-1">C</div>
  <div class="col-sm-1">D</div>
  <div class="col-sm-1">E</div>
  <div class="col-sm-1">F</div>
  <div class="col-sm-1">G</div>
  <div class="col-sm-1">H</div>
  <div class="col-sm-1">I</div>
  <div class="col-sm-1">J</div>
  <div class="col-sm-1">K</div>
  <div class="col-sm-1">L</div>
</div>

Answer 3

如果你想让你的图片保持在 Bootstrap 列内，你需要额外的 CSS：

img {
    max-width: 100%;
    max-height: 100%;
}

如果您想在 A div 中放置图像（它将位于屏幕左侧），则您的 HTML 将如下所示：

<div class="row">
  <div class="col-sm-1">
    <img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="">
  </div>
  <div class=" col-sm-1 ">B</div>
  <div class=" col-sm-1 ">C</div>
  <div class=" col-sm-1 ">D</div>
  <div class=" col-sm-1 ">E</div>
  <div class=" col-sm-1 ">F</div>
  <div class=" col-sm-1 ">G</div>
  <div class=" col-sm-1 ">H</div>
  <div class=" col-sm-1 ">I</div>
  <div class=" col-sm-1 ">J</div>
  <div class=" col-sm-1 ">K</div>
  <div class=" col-sm-1 ">L</div>
</div>

您不需要同时使用col-sm、col-md和col-lg。如果只使用col-sm，它会在大屏幕和中等屏幕上产生与其他效果相同的效果。

如果您希望图像始终位于中心，则需要使用偏移量。偏移量只是一个空白列，位于您的列左侧。根据您想要的大小，如果您像上面那样操作，您的图像将始终位于中心：

<div class="row">
      <div class="col-sm-2 col-sm-offset-5">
        <img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="">
      </div>
</div>

请记住，一行只能有12列。我上面的方法是在图像左侧放置了5个空白列，这占用了2列，然后右侧还有5列来完成12列。

- Luiz Henrique

Answer 4

你可以在 div 标签中添加一个类，并使用 CSS 设置图像。

.image1 {
    background-image : url('../img/sample.jpg');
 }

在 HTML 中是“十”

<div class="col-md-1 col-sm-1 col-lg-1 image1">A</div>

试试这个，可能会有帮助

- hardik