Bootstrap缩略图在较小的屏幕上重叠其他元素 [英] Bootstrap thumbnails overlapping other elements on smaller screens
问题描述
我使用bootstrap创建了一个大表单。然而,我没有使用< form>
元素,因为我在各种< input>
内置专题引导板。
其中一个面板使用缩略图作为输入按钮来提交用户照片。
>
< div class =panel-heading>
< h3 class =panel-title> Biodata< / h3>
< / div>
< div class =panel-body>
< div class =row>
< div class =col-sm-2>
< div class =form-group>
< label for =personidphoto> ID照片:< / label>
< a class =thumbnail thumbnail-buttonhref =#>
< img src =blank_avatar.pngid =personidphoto>
< / a>
< / div>
< / div>
< div class =col-sm-10>
< div class =row>
< div class =col-sm-4>
< div class =form-group>
< label for =birthday>出生日期:< / label>
< input type =numberclass =form-controlid =birthdaymin =1max =31placeholder =DD>
< / div>
< / div>
< div class =col-sm-4>
< div class =form-group>
< label for =birthmonth>& nbsp< / label>
< input type =numberclass =form-controlid =birthmonthmin =1max =12placeholder =MM>
< / div>
< / div>
< div class =col-sm-4>
< div class =form-group>
< label for =birthyear>& nbsp< / label>
< input type =numberclass =form-controlid =birthyearmin =1900max =2015placeholder =YYYY>
< / div>
< / div>
< / div>
< div class =row>
< div class =col-sm-6>
< div class =form-group>
< label for =gender>性别:< / label>
< input type =textclass =form-controlid =gender>
< / div>
< / div>
< div class =col-sm-6>
< div class =form-group>
< label for =medical>着名的医疗状况:< / label>
< input type =textclass =form-controlid =medical>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
我不得不将缩略图的样式设置为适合组内。
a.thumbnail.thumbnail-button {
height:108px;
width:108px;
display:block;
margin-bottom:7px;
}
现在问题在于:重新调整屏幕大小时,缩略图然后与其他表单组元素重叠。
我能做些什么来解决这个问题? 您可以使用百分比而不是图像的像素。检出这个 codepen 。
CSS:
a.thumbnail.thumbnail-button {
width:100%;
display:block;
margin-bottom:7px;
}
您的固定宽度打破了您的布局。当宽度为百分比时,宽度将随着解决问题的页面扩展。
I have created a large form using bootstrap. I didn't use the <form>
element however, as I organised input fields in various <input>
inside thematic Bootstrap panels.
One of these panels uses a thumbnail as an input button to submit a user photo.
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Biodata</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label for="personidphoto">ID Photo:</label>
<a class="thumbnail thumbnail-button" href="#">
<img src="blank_avatar.png" id="personidphoto">
</a>
</div>
</div>
<div class="col-sm-10">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="birthday">Birthdate:</label>
<input type="number" class="form-control" id="birthday" min="1" max="31" placeholder="DD">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="birthmonth"> </label>
<input type="number" class="form-control" id="birthmonth" min="1" max="12" placeholder="MM">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="birthyear"> </label>
<input type="number" class="form-control" id="birthyear" min="1900" max="2015" placeholder="YYYY">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="gender">Gender:</label>
<input type="text" class="form-control" id="gender">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="medical">Notable medical condition(s):</label>
<input type="text" class="form-control" id="medical">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've had to style the thumbnail to it to fit among from-groups.
a.thumbnail.thumbnail-button {
height: 108px;
width: 108px;
display: block;
margin-bottom: 7px;
}
Now the problem is: when re-sizing the screen, the thumbnail then overlaps with the other form-group elements.
What can I do to fix this?
You can use percentages instead of pixels for the image. Checkout this codepen.
CSS:
a.thumbnail.thumbnail-button {
width: 100%;
display: block;
margin-bottom: 7px;
}
Your fixed width breaks your lay-out. When your width is in percentages, your width will scale with the page which solves your problem.
这篇关于Bootstrap缩略图在较小的屏幕上重叠其他元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!