Question

我使用bootstrap创建了一个大表单。我没有使用<form>元素，因为我在主题Bootstrap面板中的各种<input>中组织了输入字段。

其中一个面板使用缩略图作为输入按钮来提交用户照片。

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

我必须将缩略图设置为适合来自群组。

a.thumbnail.thumbnail-button { 
    height: 108px;
    width: 108px;
    display: block;
    margin-bottom: 7px;
}

现在的问题是：在重新调整屏幕大小时，缩略图会与其他表单组元素重叠。

我该怎么做才能解决这个问题？

Answer 1

您可以使用百分比代替图像的像素。结帐codepen。

CSS：

a.thumbnail.thumbnail-button {
    width: 100%;
    display: block;
    margin-bottom: 7px;
}

你的固定宽度打破了你的布局。当您的宽度为百分比时，您的宽度将随着解决问题的页面缩放。

Answer 2

您已将固定的width和height设置为.thumbnail-button。所以你需要：

a.thumbnail.thumbnail-button {
    margin: 0;
    display: block;
    margin-bottom: 7px;
}

并提供图像，全宽：

a.thumbnail.thumbnail-button img {
    width: 100%;
}

并提供a.thumbnail.thumbnail-button，grid类：

<a class="thumbnail thumbnail-button col-md-2">

Bootstrap缩略图与较小屏幕上的其他元素重叠

2 个答案: