Question

以下是代码：

<div class="row" >
    <div id="box1" class="col-lg-4 box"style="">
        <img src="images/1.png" style="" class="num-img">
        <a href="#" style="text-decoration:none;color:#fff;">box 1 content</a>
    </div>  
    <div id="box2" class="col-lg-4 box" style="">
        <img src="images/2.png" style="" class="num-img">
        <a href="#" style="text-decoration:none;color:#fff;">box 2 content</a>
    </div>
    <div id="box3" class="col-lg-4 box" style="">
        <img src="images/3.png" style="" class="num-img">
        <a href="#" style="text-decoration:none;color:#fff;">box 3 content</a>  
    </div>
</div>

框中的CSS：

.box
{
    height: 130px;
    width: 200px;
    background-color: #000;
    color: #FFF;
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

这就是我想要它的样子：

这就是现在的样子：

当我删除box类并写入：

时，这就是它的样子

<div id="box1" class="col-lg-4 "style="">

我该如何解决这个问题？

更新（添加margin:0 auto后）：

Answer 1

您可能会覆盖y width的{{1}}，具体取决于您col-lg-4 css的加载时间。尝试

divs

这不会强制box div设置<div id="box1" class="col-lg-4"> <div class="box"> <img src="images/1.png" style="" class="num-img"> <a href="Search.jsp" style="text-decoration:none;color:#fff;">box 1 content</a> </div> </div>宽度，而是col-lg-4，内部px设置为%。

如果您希望将块置于引导程序div中心，请将width添加到cols css。

margin: 0 auto;

使用fiddle

的示例

Answer 2

添加col-offset-2所有col类，您将看到更改。根据要求更改col-offset-2。

Answer 3

或者您可以将此框包装在这样的列中。

<div class="row" >
      <div id="box1" class="col-lg-4"style="">
          <div class="box">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
            <a href="#" style="text-decoration:none;color:#fff;">box 1 content</a>
          </div>
      </div>  
      <div id="box2" class="col-lg-4" style="">
          <div class="box">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
              <a href="#" style="text-decoration:none;color:#fff;">box 2 content</a>
          </div>
      </div>
      <div id="box3" class="col-lg-4" style="">
          <div class="box">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
              <a href="#" style="text-decoration:none;color:#fff;">box 3 content</a>  
          </div>
      </div>
</div>

Answer 4

请检查：

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.box
{
    height: 130px;
    width: 200px;
    background-color: #000;
    color: #FFF;
    padding: 20px;
    font-size: 30px;
    text-align: center;
}


</style>
</head>
<body>

<div class="row" >
      <div id="box1" class="col-lg-4 text-center">
          <div class="box" style = "display:inline-block">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
            <a href="#" style="text-decoration:none;color:#fff;">box 1 content</a>
          </div>
      </div>  
      <div id="box2" class="col-lg-4 text-center" style="">
          <div class="box"  style = "display:inline-block">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
              <a href="#" style="text-decoration:none;color:#fff;">box 2 content</a>
          </div>
      </div>
      <div id="box3" class="col-lg-4  text-center" style="">
          <div class="box" style = "display:inline-block">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
              <a href="#" style="text-decoration:none;color:#fff;">box 3 content</a>  
          </div>
      </div>
</div>

</body>
</html>

CodePen：http://codepen.io/anon/pen/ZbOKKw

如何使用引导程序对齐这些框？

4 个答案: