文章/答案/技术大牛

发布

社区首页 >问答首页 >在bootstrap中划分列的最佳方法

问在bootstrap中划分列的最佳方法
EN

Stack Overflow用户

提问于 2015-10-20 13:20:07

回答 3查看 15.9K关注 0票数 2

我用下面的方法划分了我的网格系统。

<div class="container">
   <div class="row">
       <div class="col-md-8">
           <div class="slider"></div>
           <!--divided column into 6/6-->
           <div class="col-md-6">
               <img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail" />
               <img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
               <img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
           </div>
           <div class="col-md-6">
               <p>some content with image</p>
           </div>
       </div>
       <div class="col-md-4">
           some content plus image
       </div>
   </div>
</div>

我的问题是我不能在那个div中设置3个图像，因为它的宽度较小。有谁能告诉我怎么才能让它工作。如果我在我的网格系统中做错了什么，请指导我。

谢谢

twitter-bootstrap-3

html

css

twitter-bootstrap

回答 3

Stack Overflow用户

发布于 2015-10-20 13:42:41

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="slider"></div>
            <!--divided column into 6/6-->
            <div class="col-md-6">
                <div class="col-md-4">
                    <img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail" />
                </div>
                <div class="col-md-4">
                    <img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
                </div>
                <div class="col-md-4">
                    <img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
                </div>                 
            </div>
            <div class="col-md-6">
                <p>some content with image</p>
            </div>
        </div>
        <div class="col-md-4">
            some content plus image
        </div>
</div>

希望这能行得通。

票数 6

Stack Overflow用户

发布于 2015-10-20 13:36:53

您可以使用来添加自定义类

.thumb_img .img-thumbnail{
    width:32%;
    padding:4px;
    margin-right:1%;
    float:left;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="row">
    <div class="col-md-8">
        <div class="slider"></div>
        <!--divided column into 6/6-->
        <div class="col-md-6 thumb_img">
          <div class="row">
            <img src="img/2.jpg" class="img-thumbnail img-responsive" />
            <img src="img/2.jpg" class="img-thumbnail img-responsive" />
            <img src="img/2.jpg" class="img-thumbnail img-responsive" />
          </div>
        </div>
        <div class="col-md-6">
            <p>some content with image</p>
        </div>
    </div>
  </div>
</div>

票数 1

Stack Overflow用户

发布于 2015-10-20 13:39:16

对你的问题不是百分之百肯定，但是..

1)只能在row中嵌套col-，即：

<div class="row">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-12">

2)每次将一行划分为多列后，在嵌套行中又有12列可用。即：

<div class="row">
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-6">
      </div>
      <div class="col-md-6">
      </div>
    </div>
  </div>
  <div class="col-md-4">
  </div>
</div>

或者，您可以在一行中创建3列：

<div class="row">
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-4">
      </div>
      <div class="col-md-4">
      </div>
      <div class="col-md-4">
      </div>
    </div>
  </div>
  <div class="col-md-4">
  </div>
</div>

即4*3= 12列。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33228559

复制

相似问题

问在bootstrap中划分列的最佳方法
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在bootstrap中划分列的最佳方法EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在bootstrap中划分列的最佳方法
EN