Question

我正在设计asp.net bootstrap表单。我有一个div。

代码：

<div id="gallery">
        <a href="aboutus.aspx">
            <img src="images/layout/exportsatdubai.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
        </a>

         <a href="http://expogr.com/" target="_blank">
            <img src="images/layout/777x282-africa-1.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
        </a>
        <a href="addlisting.aspx">
            <img src="images/layout/becomeAMember.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
        </a><a href="dubaiexhibitions.aspx">
            <img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" width="1000" title="" alt=""
                rel="a" />
        </a>
    </div>

的CSS：

  #gallery
        {
            position: relative;
            height: 282px;
        }

我想使用bootstrap网格系统使这个div响应。我与div混淆ie.how在div上应用网格系统？

<div class="row">
 <div class="col-sm-12">
   <div class="gallery">
       ------contents------
</div>
</div>
</div>

是这样的吗？任何帮助都将受到高度赞赏。我是bootstrap.please dont downvote.i的新手。我只是想知道如何将网格系统应用于div。

Answer 1

使用网格系统的一般方法是

<div class="container">
  <div class="row">
     <div class="col-sm-3">Content1</div>
    <div class="col-sm-3">Content2</div>
    <div class="col-sm-3">Content3</div>
    <div class="col-sm-3">Content4</div>
  </div>

</div>

每列都有相同的宽度，它会起到响应作用。除非您有意要，否则您不需要在这些列中设置div的高度或宽度。如果您可以提供更多详细信息，您可以尝试提供更多信息。

Answer 2

您可以像这样使用引导网格。

<div class="container"> 
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
         <a href="aboutus.aspx">
         <img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt="" rel="a" />
         </a>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
         <a href="http://expogr.com/" target="_blank">
         <img src="images/layout/777x282-africa-1.jpg" class="img-responsive" alt="" rel="a" />
         </a>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
         <a href="addlisting.aspx">
         <img src="images/layout/becomeAMember.jpg" class="img-responsive" alt="" rel="a" />
         </a>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
         <a href="dubaiexhibitions.aspx">
         <img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" alt="" rel="a" />
         </a>
      </div>
   </div>
</div>

您可以点击此链接了解更多详情。 Bootstrap Grid

Answer 3

您可以使用12个跨度的网格系统和任意数量的行，因为您对不同的行具有不同的图像跨度，如下所示：

<div class="container">
 <div class="row">
  <div class="col-xs-12 col-md-12"></div>
  <a href="aboutus.aspx">
         <img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt=""/>
         </a>
</div>

<div class="row">
  <div class="col-xs-6 col-md-6">...</div>
  <div class="col-xs-6 col-md-6">...</div>
</div>

<div class="row">
  <div class="col-xs-6 col-md-6">...</div>
  <div class="col-xs-6 col-md-6">.....</div>
</div>

..... 
.....
and so on
</div>

div如何使用bootstrap网格系统？

3 个答案: