引導縮略圖與較小屏幕上的其他元素重疊

Question

我使用引導程序創建了一個大表格。 但是，我沒有使用<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

您已經為.thumbnail-button設置了固定的width和height 。 因此，您需要：

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