处理大型与小型内容重叠的Bootstrap网格?

时间:2017-12-05 20:02:54

标签: html twitter-bootstrap

我试图找出为什么我的div的高度是从新行开始而不是用col-md-6包裹?如果内容大于其他内容,我想要它,只需用它包装。但当我开始一个新的col-md-6时,它开始在一个新行上,而小于大内容的内容会在高度上留下一堆空白空间。

另外请忽略我对网格解决方案的修复只是好奇的属性。我只想尝试在内容大于较小内容时实现下一个内容包装,而不是从新行开始。

我试图展示这个问题很难复制,所以我在这个代码集示例中遇到了我所面临的问题:

Codepen Example

这是我的代码:



	<link rel type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  
  <form name="servicesform" action="test.cfm" method="post" class="form-inline">

		<!--- DEL --->
		<!--- FURNITURE --->
		<div class="col-md-6">
			<h2>FURNITURE:</h2>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="assureallfurnitureorder" class="form-check-input">
		      <span>Assure all furniture on order is in unit</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="assureallfurnitureclean" class="form-check-input">
		      <span>Assure all furniture is clean and in working order</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="assureallfurnituretouched" class="form-check-input">
			  <span>Assure all furniture has been touched up</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="anybrokenitemshave" class="form-check-input">
			  <span>Any broken items have been reported immediately through "5-STAR"</span>
		    </label>
		  </div>
		</div>
		<!---PRODUCT --->
		<div class="col-md-6">
			<h2>PRODUCT:</h2>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="assureallnewproduct" class="form-check-input">
		      <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="assureallfurniturecleanworking" class="form-check-input">
		      <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="setuptvs" class="form-check-input">
			  <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="arrangefurnitureapp" class="form-check-input">
			  <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="ensureartwork" class="form-check-input">
			  <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="allbedsaremade" class="form-check-input">
			  <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="decosetup" class="form-check-input">
			  <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="welcomepack" class="form-check-input">
			  <span>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="moveinshouldbe" class="form-check-input">
			  <span>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going</span>
		    </label>
		  </div>			  
		</div>

		<!---PRODUCT --->
		<div class="col-md-6">
			<h2>PRODUCT:</h2>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="assureallnewproduct" class="form-check-input">
		      <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="assureallfurniturecleanworking" class="form-check-input">
		      <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="setuptvs" class="form-check-input">
			  <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="arrangefurnitureapp" class="form-check-input">
			  <span>Arrange furniture appropriately</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="ensureartwork" class="form-check-input">
			  <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="allbedsaremade" class="form-check-input">
			  <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="decosetup" class="form-check-input">
			  <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="welcomepack" class="form-check-input">
			  <span>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="moveinshouldbe" class="form-check-input">
			  <span>test</span>
		    </label>
		  </div>			  
		</div>

    		<!---PRODUCT --->
		<div class="col-md-6">
			<h2>PRODUCT:</h2>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="assureallnewproduct" class="form-check-input">
		      <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="assureallfurniturecleanworking" class="form-check-input">
		      <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="setuptvs" class="form-check-input">
			  <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="arrangefurnitureapp" class="form-check-input">
			  <span>Arrange furniture appropriately</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="ensureartwork" class="form-check-input">
			  <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="allbedsaremade" class="form-check-input">
			  <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="decosetup" class="form-check-input">
			  <span>test</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="welcomepack" class="form-check-input">
			  <span>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going</span>
		    </label>
		  </div>
		  <div class="form-check">
		    <label class="form-check-label">
		      <input type="checkbox" name="moveinshouldbe" class="form-check-input">
			  <span>test</span>
		    </label>
		  </div>			  
		</div>
	</form>
&#13;
&#13;
&#13;

0 个答案:

没有答案