移动列表中的Bootstrap列移位

Question

我正在编写一种图书馆管理网页，我希望在其中显示图书集。

＆＃13;

＆＃13;

<div class="panel-body">
	<div class="col-sm-3 col-md-3 col-lg-3" style="margin-bottom: 10px;">
		<div class="row">
			<div class="col-sm-2 col-md-3 col-lg-6" style="width: auto;">
				<div style="position: relative; display:inline-block;"><img src="https://cdn.pastemagazine.com/www/system/images/photo_albums/hobbit-book-covers/large/photo_5653_0-7.jpg?1384968217" style="width:auto;max-height:150px"><img src="https://lh3.googleusercontent.com/ezIB-cHDLA12OTFqRavb6V9jmtX1aQZ-LqLRQ2CMprFgRjDqPP4dbo_4VVC_aAJ3WA=w300" style=" position: absolute;bottom: -10px;right: -3px;width: 30px;height: 30px;">

				</div>
			</div>
			<div class="col-sm-2 col-md-3 col-lg-6">
			<div class="row">Der Hobbit
				</div>
				<div class="row">Tolkin, J.R.R
				</div>
			</div>
		</div>
	</div>
	<div class="col-sm-3 col-md-3 col-lg-3" style="margin-bottom: 10px;">
		<div class="row">
			<div class="col-sm-2 col-md-3 col-lg-6" style="width: auto;">
				<div style="position: relative; display:inline-block;"><img src="https://cdn.pastemagazine.com/www/system/images/photo_albums/hobbit-book-covers/large/photo_5653_0-7.jpg?1384968217" style="width:auto;max-height:150px"><img src="https://lh3.googleusercontent.com/ezIB-cHDLA12OTFqRavb6V9jmtX1aQZ-LqLRQ2CMprFgRjDqPP4dbo_4VVC_aAJ3WA=w300" style=" position: absolute;bottom: -10px;right: -3px;width: 30px;height: 30px;">

				</div>
			</div>
			<div class="col-sm-2 col-md-3 col-lg-6">
				<div class="row">Der Hobbit
				</div>
				<div class="row">Tolkin, J.R.R
				</div>
			</div>
		</div>
	</div>
	<div class="col-sm-3 col-md-3 col-lg-3" style="margin-bottom: 10px;">
		<div class="row">
			<div class="col-sm-2 col-md-3 col-lg-6" style="width: auto;">
				<div style="position: relative; display:inline-block;"><img src="https://cdn.pastemagazine.com/www/system/images/photo_albums/hobbit-book-covers/large/photo_5653_0-7.jpg?1384968217" style="width:auto;max-height:150px"><img src="https://lh3.googleusercontent.com/ezIB-cHDLA12OTFqRavb6V9jmtX1aQZ-LqLRQ2CMprFgRjDqPP4dbo_4VVC_aAJ3WA=w300" style=" position: absolute;bottom: -10px;right: -3px;width: 30px;height: 30px;">

				</div>
			</div>
			<div class="col-sm-2 col-md-3 col-lg-6">
				<div class="row">Der Hobbit
				</div>
				<div class="row">Tolkin, J.R.R
				</div>
			</div>
		</div>
	</div>
		</div>

＆＃13;

＆＃13;

＆＃13;

在小屏幕上，列很奇怪。这是我希望它显示的方式：

我认为我搞乱了列类 - 有谁能告诉我如何修复它？

Answer 1

图片和文字不在同一个元素中。它们分为两排。

Answer 2

请为每个文本尝试以下代码：

<div class="col-sm-2 col-md-3 col-lg-6">
    <div class="row">
        <div class="col-sm-12">Der Hobbit</div>
    </div>
    <div class="row">
        <div class="col-sm-12">Tolkin, J.R.R</div>
    </div>
</div>

可能就足够了:(取决于您的需求）

<div class="col-sm-2 col-md-3 col-lg-6">
    Der Hobbit<br>
    Tolkin, J.R.R
</div>

或者像这样：

<div class="col-sm-2 col-md-3 col-lg-6">
    <div>Der Hobbit</div>
    <div>Tolkin, J.R.R</div>
</div>