Question

我正在使用bootstrap框架为网站进行网格布局。我想要一个网格显示2个堆叠div，它跨越col-lg-4的宽度，旁边是一个大的div，横跨col-lg-8的宽度，并且高度与两个堆叠div相等。

<div class="mockups_wadels">
    <div class="div_center">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 grid_padding">
                    <div class="wadels_dark">
                    </div>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 grid_padding">
                    <div class="wadels_embroidery">
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 grid_padding">
                    <div class="wadels_white">
                    </div>
                </div>
            </div><!--end of row-->
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="wadels_browser">
                    </div>
                </div>
            </div>
        </div><!--container end-->
    </div><!--end div center-->
</div><!--end of mockup-->

这是一个帮助说明的jsfiddle。我的问题是我不知道如何强制两个col-lg-4 div叠加在一起。而不是堆叠第二个div只是开始一个新行。 http://jsfiddle.net/Dinkledine/0w2fppx6/

欲望结果

感谢您的帮助

Answer 1

这是我的面板和col布局的解决方案。如果你需要填充从类中删除nopadding

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style type="text/css">
	.nopadding {
	   padding: 0 !important;
	   margin: 0 !important;
	}
  </style>
 </head>

 <body>
	<div class="container-fluid row-offcanvas nopadding">
			<div class="col-sm-5 nopadding">
				<!--Content 1-->
				<div class="col-sm-12 col-md-12 nopadding">		
					<div class="panel panel-default nopadding">
						<div class="panel-heading" style="background-color: lightblue; color: #000; font-weight:bold">content 1</div>
							<div class="panel-body" style="height:270px;overflow:auto;"></div> 			
						<div class="panel-footer" style="background-color: lightblue;"></div>
					</div>
				</div><!--Content 1 Ends-->

				<!--Content 2-->
				<div class="col-sm-12 col-md-12 nopadding" >
					<div class="panel panel-default nopadding">
						<div class="panel-heading" style="background-color: lightsteelblue; font-weight:bold">content 2</div>
							<div  class="panel-body" style="height:270px;overflow:auto;"></div> 
						<div class="panel-footer" style="background-color: lightsteelblue;"></div>
					</div>
				</div><!--Content 2 Ends-->
			</div>

			<div class="col-sm-7 nopadding">
				<!--Content 3 -->
				<div  class="col-sm-12 col-md-12 nopadding">   
					<div class="panel panel-default nopadding">
						<div class="panel-heading" style="background-color: lightsteelblue; font-weight:bold">Content 3</div>
							<div class="panel-body" style="height:602px;overflow:auto;"></div>
						<div class="panel-footer" style="background-color: lightsteelblue;"></div>
					</div>  
				</div><!--Content 3 Ends -->
		 </div>
	</div>	<!--row-->	
 </body>
</html>

Answer 2

你可以这样做：

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4">
        <div class="col-lg-12 col-md-12 col-sm-12"></div>
        <div class="col-lg-12 col-md-12 col-sm-12"></div>
    </div>
    <div class="col-lg-8 col-md-8 col-sm-8">
        <div class="col-lg-12 col-md-12 col-sm-12"></div>
    </div>
</div>

请记住，行基于12列，因此您可以考虑更大布局。

你最初以你想要的方式分割你的画面（4 + 8），在那些魔法发生的地方！

由于12 col宽的div占据了整个空间（它可能是一个容器或任何大小的div），下一个div将堆叠在它下面。

Answer 3

我不认为这是最佳解决方案，但请查看http://jsfiddle.net/b4voqjud/2/

<div class="mockups_wadels">
<div class="div_center">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="wadels_dark"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="wadels_dark"></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-8">
                <div class="wadels_dark"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="wadels_browser">
                </div>
            </div>
        </div>
    </div><!--container end-->
</div><!--end div center-->
</div><!--end of mockup-->

如果你希望这两个colums总是相同的高度我不认为你可以用bootstrap做到这一点，你必须使用javascript或flexbox，或者只是调整不同设备尺寸的填充

如何在大屏幕上的bootstrap中堆叠两列

3 个答案: