如何将图像标记放入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> 

Answer 2

请看一下新的例子，我真的不知道你想做什么，但你可以玩cols很多，通常没有必要添加任何余量！ 但是如果由于任何原因你想要添加边距你可以定义一个类（你可以随意调用它）然后你可以定义边距量：

在这个例子中，我将其称为“资产”：您可以通过以下方式编写它：

    .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

现在你可以写：

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


  
 
  
  
  
 
   
 
    
    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>
 
   
 
  



  
 
  
  
  
 
   
 
    
    img {
        display: block;
        margin-left: auto;
        margin-right: auto
    }
    .asset {
      margin-right: 50px;
      margin-left: 50px;
    }
 
    
    <div class="row asset">
      <div class="">A</div>
      <div class="col-xs-12">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS2Xjhc-NPN5UAWzKdY3Kpl29Tyt-zCC8aOd3Gez8i2zrF3BS9bSQ" />
      </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>
 
   
 
  

Answer 3

如果您希望图像保留在引导列中，则需要额外的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个5列，以完成12列。

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>

试试，这可能会有所帮助