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">&nbsp</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">&nbsp</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屋！