Question

在此页面上:(已删除链接）

我开始构建tumblr主题，我决定使用bootstrap构建它。如果单击左下角的小I信息按钮，则会显示一个div，其中包含用户图片和说明。用户图片和说明按照我的要求显示，但它们偏离中心。我希望他们能够居中。我试过＆lt;中心＆gt;，使用流体宽度容器等无济于事。我还检查了bootstrap.css，bootstrap.min.js正确链接到页面。

任何帮助都会很棒！

我的代码：

      <div class="container-fluid" id="foo" style="z-index:5; display:none; height:auto;">  
       <center>
       <div class="container-fluid" style="height:auto;">
       <div class="row">
 <div class="col-md-2" style=" margin-top:1%;"><img class="avatar-style-circle" src="{PortraitURL-128}" /><br/><h3>{AuthorName}</h3></div>
  <div class="col-xs-12 col-md-8" style="background-color:blue; margin-top:3%;"><p style="text-align:justify;">{Description}<br/></p></div></div></div>

   <div class="container-fluid" style="height:auto; margin-bottom:2%;">
    <center>
   <div class="container-fluid">

    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
    <br/>
    <div class="btn-group" role="group" aria-label="...">   <a href="{BlogURL}ask" button class="btn btn-default" type="button">Ask</a>

    <a href="{BlogURL}archive" button class="btn btn-default" button class="btn btn-default" type="button">Archive</a>

   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" style="z-index:5; margin-left:13%;">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div><!-- /.col-lg-6 --></center>
  </div>
</div>
</div>
</div>
    <div class="site-wrapper">
    {block:ifShowInfoButton}

   <a href="#" style="text-decoration:none;" onclick="toggle_visibility('foo');"><i class="fa  fa-info-circle fa-3x" style="position:absolute; margin-left:0.4%; margin-top:0.4%; color:{color:Info Button Color};"></i></a>


     {/block:ifShowInfoButton}

Answer 1

将图片上的col从md-2更改为md-4。

或者将文本上的col从md-8更改为md-10（更好）！

它适用于12网格系统，目前它只使用12列中的10列，这就是为什么它似乎与左边对齐：）

您也可以使用offset。

Answer 2

papakia的回答是正确的，但是你也可以在你的图像列前面添加一个空列col-md-2，如果它们已经根据你的喜好调整，有时候有助于不抛弃其他项目的比例。 / p>

Bootstrap中心问题

2 个答案: