Question

我是新手，我试图将两张照片并排放在一个引导行中，但这些列似乎没有用。我究竟做错了什么？预先感谢您的任何帮助！

{{1}}

Answer 1

<div class="col-xs-12">
<div class="col-xs-6">
    <img src="https://heavyeditorial.files.wordpress.com/2016/02/david-joseph.jpg?quality=65&strip=all&strip=all/200x200" class="img-thumbnail img-responsive" alt="David Joseph">
    <p class="caption">David Joseph was unarmed when he was fatally shot by Austin police. <em>Photo credit: APD</em></p>
</div>
<div class="col-xs-6">
  <img src="http://assets.nydailynews.com/polopoly_fs/1.2523996.1454945162!/img/httpImage/image.jpg_gen/derivatives/article_400/observer9n-3-web.jpg" class="img-thumbnail img-responsive" alt="Antronie Scott">
  <p c-lass="caption">San Antonio police fatally shot Antronie Scott, who was also unarmed. <em>Photo credit: SAPD</em></p></div>
</div>
</div>

如果您对12-col网格不满意，可以在此处将其自定义为任何其他值：http://getbootstrap.com/customize/

向下滚动到“网格系统”，更改为您的需求，向下滚动，编译并下载您自己的引导程序;）

Answer 2

这可能适用于您尝试执行的操作：

<div class="container">
    <section class="row">
        <div class="col-md-6">
            <img src="https://heavyeditorial.files.wordpress.com/2016/02/david-joseph.jpg?quality=65&strip=all&strip=all/200x200" class="img-thumbnail img-responsive" alt="David Joseph">
            <p class="caption">David Joseph was unarmed when he was fatally shot by Austin police. <em>Photo credit: APD</em></p>
        </div>
        <div class="col-md-6">
            <img src="http://assets.nydailynews.com/polopoly_fs/1.2523996.1454945162!/img/httpImage/image.jpg_gen/derivatives/article_400/observer9n-3-web.jpg" class="img-thumbnail img-responsive" alt="Antronie Scott">
            <p class="caption">San Antonio police fatally shot Antronie Scott, who was also unarmed. <em>Photo credit: SAPD</em></p></div>
        </div>
    </section>
</div>

Answer 3

您需要为所有变体指定相同的CSS列类。

您的尝试列出了col-xs-12，将其更改为col-xs-6。

基本上，每行总共有12列，你希望它们在你的情况下被平均分割，每个div占用6列宽。

Answer 4

对于图像，您需要在图像标签“img-responsive”中添加类：）

Bootstrap列无效

4 个答案: