<img> 在引导网格系统中的左对齐答案

【问题标题】：Left alignment of <img> within a bootstrap grid system<img> 在引导网格系统中的左对齐
【发布时间】：2017-06-27 17:13:35
【问题描述】：

我正在尝试将图像放在列中并左对齐，但 img 始终在列中自动居中。我对 Bootstrap 不太熟悉，如果你能告诉我它不起作用的原因，我会很高兴。

这是我的代码

      <div class="row">
    <div class="col-sm-12">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h1>Basic</h1>
        </div>
        <div class="panel-body">
            <p>test</p>
            <!--Portfolio Container-->        
            <div class="container-fluid text-center pull-left bg-grey">
                <div class="row" border>
                    <div class="col-lg-12" width="100%">
                        <div class="thumbnail">
                            <img src="paris.jpg" alt="Paris">
                            <p><strong>Yes we built Paris</strong></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

提前非常感谢！

【问题讨论】：

看起来 type.less 有一个 .text-center: center;附上
我想提一下
。无需将宽度设置为 100%，因为 col-lg-12 会自行设置。现在解决你的问题。使用 text-left 左对齐图像

标签： html css image alignment

【解决方案1】：

text-center 类用于居中对齐 column 内的内容，从父容器-fluid 中移除 text-center 类或覆盖 css

  <style>
   .thumbnail img
    {
      text-align:left;
    }
  </style>

【讨论】：

【解决方案2】：

只需从父 container-fluid 中删除 text-center..

     <div class="container-fluid pull-left bg-grey">
              <div class="row" border="">
                     <div class="col-lg-12" width="100%">
                              <div class="thumbnail">
                                  <img src="paris.jpg" alt="Paris">
                                  <p><strong>Yes we built Paris</strong></p>
                               </div>
                     </div>
              </div>
      </div>

http://www.codeply.com/go/HOONi5zSpD

【讨论】：