Question

我正在尝试在列中放置并左对齐图像，但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>

非常感谢提前！

Answer 1

文本中心类用于居中对齐列内的内容，从父容器流体中删除文本中心类或覆盖css

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

Answer 2

只需从父text-center移除container-fluid ..

     <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

在引导网格系统中<img/>左对齐

2 个答案: