Question

我无法将我的div与引导程序对齐。中间的大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并将子div放入其中。检查下图。在响应状态父母100％的孩子并排

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与引导程序对齐

4 个答案: