html - 彼此之间的 Bootstrap 元素

Question

我有两个 div。在普通浏览器中，两个 div 是并排的。但是如果我减少浏览器的绘制，第一个 div 失去了他的高度，第二个 div 滑入第一个元素。我尝试将 body 设置为最小高度 100%，但没有任何变化。

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

Answer 1

对于小于 768 像素的所有内容，xs 属性用于列大小。

因此，您需要将“col-xs-[size]”添加到您的 div。示例:

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

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

片段:

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