Question

我想要它，所以当它到达div框的底部时行会中断但是，它不会这样做。我正在使用Bootstrap 3.

    <div class="col-md-10 column" id="main">
        <h3>
          Gallery
        </h3>
            <div class="container-fluid">
                <div class="row-fluid">
                    <ul> 
                        <li class="span4"><img src="img/thumbs/6.jpg" alt=""</li>
                        <li class="span4"><img src="img/thumbs/7.jpg" alt=""</li>
                        <li class="span4"><img src="img/thumbs/8.jpg" alt=""</li>
                        <li class="span4"><img src="img/thumbs/9.jpg" alt=""</li>
                        <li class="span4"><img src="img/thumbs/11.jpg" alt=""</li>
                        <li class="span4"><img src="img/thumbs/12.jpg" alt=""</li>
                        <li class="span4"><img src="img/thumbs/19.jpg" alt=""</li>
                        <li class="span4"><img src="img/thumbs/20.jpg" alt=""</li>

                </div>
            </div>


    </div>

Answer 1

我会查看Documentation for the Bootstrap 3 grid，并通过一些示例来确保您理解这一点。

以下是您当前标记的可运行代码段：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row-fluid">
    <ul> 
      <li class="span4"><img src="https://picsum.photos/200/200?image=1" alt=""/></li>
      <li class="span4"><img src="https://picsum.photos/200/200?image=2" alt=""/></li>
      <li class="span4"><img src="https://picsum.photos/200/200?image=3" alt=""/></li>
      <li class="span4"><img src="https://picsum.photos/200/200?image=4" alt=""/></li>
      <li class="span4"><img src="https://picsum.photos/200/200?image=5" alt=""/></li>
      <li class="span4"><img src="https://picsum.photos/200/200?image=6" alt=""/></li>
      <li class="span4"><img src="https://picsum.photos/200/200?image=7" alt=""/></li>
      <li class="span4"><img src="https://picsum.photos/200/200?image=8" alt=""/></li>
      </ul>
  </div> 
</div>

如果您只是希望每个图片占据所有屏幕尺寸的12列中的4列，您可以使用.col-xs-4，但如果没有更多关于您期望实现的信息，那将很难要确定你需要做什么。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=1" alt=""/></div>
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=2" alt=""/></div>
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=3" alt=""/></div>
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=4" alt=""/></div>
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=5" alt=""/></div>
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=6" alt=""/></div>
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=7" alt=""/></div>
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=8" alt=""/></div>
  </div> 
</div>

Bootstrap行不会分手

1 个答案: