我在一列中添加了 // First, let's define the params and then load our smaller font
FreetypeFontLoader.FreeTypeFontLoaderParameter parameter = new FreetypeFontLoader.FreeTypeFontLoaderParameter();
parameter.fontFileName = "basicfont.ttf";
parameter.fontParameters.size = 10;
game.manager.load("font.ttf", BitmapFont.class, parameter);
game.manager.finishLoading();
，在sidebar中的另外3列中添加了3 thumbnails。 row图片最初适合整个thumbnail，但是当我调整大小时，columns变小，thumbnail images保持全宽（就像通常的column一样响应工作）。我需要将bootstrap拉伸为images填充的内容。
这是我的 HTML ：
column
我甚至尝试将<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid side-navigation-bar">
<div class="row">
<!--==========================================-->
<!--Side navigation bar-->
<!--==========================================-->
<div class="col-md-3 col-md-3-thumbnail">
<div class="nav-side-menu" >
<div class="brand"><i class="fa fa-heartbeat"> myVitals.com</i></div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list" >
<ul id="menu-content" class="menu-content collapse out" >
<li>
<a href="#">
<i class="fa fa-home fa-lg fa-fw"></i> Home
</a>
</li>
<li>
<a href="#">
<i class="fa fa-book fa-lg fa-fw"></i> My Appointments
</a>
</li>
<li>
<a href="#">
<i class="fa fa-s15 fa-lg fa-fw"></i> Facilities
</a>
</li>
<li>
<a href="#"><i class="fa fa-cogs fa-lg fa-fw"></i> Services</a>
</li>
<li>
<a href="#"><i class="fa fa-stethoscope fa-lg fa-fw"></i> Doctors</a>
</li>
<li>
<a href="#">
<i class="fa fa-medkit fa-lg fa-fw"></i> Medications
</a>
</li>
<li>
<a href="#">
<i class="fa fa-medkit fa-lg fa-fw"></i> Medications
</a>
</li>
</ul>
</div>
</div>
</div>
<!--==========================================-->
<!--End of Side navigation bar-->
<!--==========================================-->
<!--==========================================-->
<!--Cards-->
<!--==========================================-->
<div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center">
<div class="thumbnail">
<figure class="imghvr-hinge-down">
<img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization">
</figure>
<div class="caption">
<h5><b>Bootstrap Cards Design</b></h5>
<p class="card-description">Hi there How are you?</p>
<p><a href="#" id="thumbnail-btn" class="success-color btn btn-primary" role="button">Read More</a></p>
</div>
</div>
</div>
<div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center">
<div class="thumbnail">
<figure class="imghvr-hinge-down">
<img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization">
</figure>
<div class="caption">
<h5><b>Bootstrap Cards Design</b></h5>
<p class="card-description">Hi there How are you?</p>
<p><a href="#" id="thumbnail-btn" class="success-color btn btn-primary" role="button">Read More</a></p>
</div>
</div>
</div>
<div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center">
<div class="thumbnail">
<figure class="imghvr-hinge-down">
<img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization">
</figure>
<div class="caption">
<h5><b>Bootstrap Cards Design</b></h5>
<p class="card-description">Hi there How are you?</p>
<p><a href="#" id="thumbnail-btn" class="btn btn-primary" role="button">Read More</a></p>
</div>
</div>
</div>
</div>
</div> 作为缩略图作为
width:100% 问题是，.thumbnail > img{width:100%; display:block;}
未采用全宽度img
任何人都可以帮助我吗？
答案 0 :(得分：1)
在Bootstrap中使用.img-fluid用于响应式图像。它有以下css：
.img-fluid {
max-width: 100%;
height: auto;
}
答案 1 :(得分：0)
您可以将宽度设置为100%，将高度设置为auto，这会将其扩展为全宽。
<强> CSS：
.thumbnail > figure > img {
width: 100%;
height: auto;
}