如何将图像标记放入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">,我该如何解决呢？谢谢大家.

Answer 1

那么,你的问题并不是很清楚.请看看这个小提琴,并详细说明你想要做什么或给我们发送设计或任何视觉效果可以帮助.

干杯

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>