1

我无法将我的 div 与引导程序对齐。中间的大 div 正在推动两侧的盒子。我怎样才能实现这种布局？

我想要实现的div的布局：

我想要实现的div的布局

4

4 回答 4

0 

.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

希望这可以帮助。

于 2016-12-28T12:00:52.807 回答
0

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

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;  
}

希望能帮助到你！

于 2016-12-28T11:03:45.327 回答
0

根据您提供的图像，我在示例设计下方创建，请检查它。为了实现您的设计，我编写了一些内联 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>

于 2016-12-28T11:04:03.547 回答
0

声明三个主 div 并将子 div 放入其中。检查下图。在响应状态父母 100% 孩子并排

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

于 2016-12-28T11:06:01.987 回答