Question

我有两个div。在普通浏览器中，两个div是并排的。但是如果我减少了浏览器的数量，那么第一个div会失去他的高度，第二个div会滑入第一个元素。我试图将身体设置为最小高度100％，但没有变化。

＆＃13;

<div class="col-lg-8 col-md-8 col-sm-8">
<h1>Inventar</h1>
<div class="inventar">
	<div class="img_div" id="822273846">
		<img src="IMG URL" alt="" class="img-responsive">
	</div>
</div>
  
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="item-overview" id="detail_822273846">
		<!-- IMAGE -->
		<img src="IMG URL" alt="" class="img-responsive">
		<!-- HR -->
		<hr>
		<!-- NAME -->
		<h3>P90 | Sand Spray</h3>
		<!-- DESCRIPTION -->
		<p>Easily recognizable for its unique bullpup design, the P90 a great weapon to shoot on the move due to its high-capacity magazine and low recoil. It has been spray-painted freehand with short, thick lines in contrasting colors.

<i>Perfect for the insurgent on the go</i></p>
		<p>Type: Consumer Grade SMG</p>
		<!-- HR -->
		<hr>
		<input type="submit" name="submit" class="btn btn-primary btn-lg btn-block" value="Sell"></button> 
		<br/>
</div>
</div>

＆＃13;

Answer 1

我认为你的意思是较小的屏幕尺寸。如果是这样，您需要添加xs列类以使div并排显示（否则它们会叠加）

<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">

和

<div class="col-lg-2 col-md-2 col-sm-2  col-xs-2">

这假设您在第二个div之前缺少结束标记。

Answer 2

对于768px以下的所有内容，xs属性用于列大小。

因此，您需要在div中添加'col-xs- [size]'。示例：

  <div class="col-lg-2 col-md-2 col-sm-2  col-xs-2">

此外，如果您希望将列内联在row中，最好将列包装在其中。

<强>段：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


 <div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<h1>Inventar</h1>
<div class="inventar">
	<div class="img_div" id="822273846">
		<img src="IMG URL" alt="" class="img-responsive">
	</div>
</div>
   </div>
  
<div class="col-lg- col-md-2 col-sm-2 col-xs-2">
<div class="item-overview" id="detail_822273846">
		<!-- IMAGE -->
		<img src="IMG URL" alt="" class="img-responsive">
		<!-- HR -->
		<hr>
		<!-- NAME -->
		<h3>P90 | Sand Spray</h3>
		<!-- DESCRIPTION -->
		<p>Easily recognizable for its unique bullpup design, the P90 a great weapon to shoot on the move due to its high-capacity magazine and low recoil. It has been spray-painted freehand with short, thick lines in contrasting colors.

<i>Perfect for the insurgent on the go</i></p>
		<p>Type: Consumer Grade SMG</p>
		<!-- HR -->
		<hr>
		<input type="submit" name="submit" class="btn btn-primary btn-lg btn-block" value="Sell"></button> 
		<br/>
</div>
</div>

</div>

它们之间的引导元素

2 个答案: