如何将 div 与 bootstrap 对齐

Question

我无法将 div 与 bootstrap 对齐。中间的大 div 压倒了两边的箱子。我怎样才能实现这种布局？

我要实现的div的布局：

Answer 1

我一直在使用这段代码，请告诉我它是否是您需要的：

HTML:

<div class="row">
  <div class="col-md-3">
    <div class="row ">
        <div class="col-md-12 medium">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 medium">
        </div>
    </div>      
  </div>
  <div class="col-md-6">
    <div class="row ">  
        <div class="col-md-12 large">
        </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="row ">
        <div class="col-md-12 small">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 small">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 small">
        </div>
    </div>          
  </div>  
</div>

CSS:

.small{
    height:100px;
    border: 1px solid;
}

.medium{
    height:200px;
    border: 1px solid;
}

.large{
    height:400px;
    border: 1px solid;  
}

希望对您有所帮助！

Answer 2

根据您提供的图片，我创建了以下示例设计，请检查。为了实现你的设计，我写了一些内联 css 请检查一下

<!DOCTYPE html>
    <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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
      
    <div class="container">
      <div class="row">
      <div class="col-lg-3 col-sm-3 col-xs-3" >
        <div class="row" style="min-height:200px;border:1px solid;margin-bottom:60px">
          This is testing data
          </div>
         <div class="row" style="min-height:360px;border:1px solid;margin-bottom:10px">
          This is testing data
          </div>
        </div>
       <div class="col-lg-5 col-sm-5 col-xs-5" style="min-height:620px;border:1px solid;margin-left:10px;margin-right:10px" >
        This is center content
        </div>
       <div class="col-lg-3 col-sm-3 col-xs-3" >
       <div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
          This is testing data
          </div>
         <div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
          This is testing data
          </div>
         <div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
          This is testing data
          </div>
        </div>
        </div>
    </div>

    </body>
    </html>

Answer 3

声明三个主要 div 并在其中放置 children 个 div。检查下图。在响应状态 parent 100% children 并排

https://i.stack.imgur.com/1qTPG.png

Answer 4

.border_black{
  border: thin black solid
 }

 .margin_top_10px{
  margin-top: 10px;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="container">
 <div class="row">

 <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
  <div class="row border_black">
  <p>Left Side Contents 1</p>
  </div>
  <div class="row border_black margin_top_10px">
  <p>Left Side Contents 2</p>
  <p>Left Side Contents 2</p>
  </div>
 </div>

 <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 center_div text-center">
  <div class="row">
  <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 border_black">
  <p>Center Contents</p>
  <p>Center Contents</p>
  <p>Center Contents</p>
  </div>
  </div>
 </div>

 <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
  <div class="row border_black">Right Side Contents 1</div>
  <div class="row border_black margin_top_10px">Right Side Contents 2</div>
  <div class="row border_black margin_top_10px">Right Side Contents 3</div>
  
 </div> 
 </div>
 </div>

这里是JSFiddle

希望对您有所帮助。

如何将 div 与 bootstrap 对齐

How to align divs with bootstrap

css

grid-system

twitter-bootstrap-3