Bootstrap縮略圖在較小屏幕上重疊其他元素

-1

我使用引導程序創建了一個大表單。但是，我沒有使用<form>元素，因爲我在主題引導面板中組織了各種<input>中的輸入字段。Bootstrap縮略圖在較小屏幕上重疊其他元素

其中一個面板使用縮略圖作爲輸入按鈕來提交用戶照片。

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

現在的問題是：重新調整大小的屏幕時，縮略圖然後與其它形式的組元素重疊。

我能做些什麼來解決這個問題？

來源

2015-08-23 Benjamin

如果您反對，請解釋爲什麼，否則人們無法學習和提高。 – Benjamin

您可以使用百分比，而不是像素爲圖像。結帳這codepen。

CSS：

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

你的固定寬度傷了你的佈局設計。當你的寬度是百分比時，你的寬度將隨着解決你的問題的頁面擴展。

來源

2015-08-23 09:32:44

所以我正在集中精力使縮略圖在2行輸入組中保持高度。我沒有意識到它與佈局衝突比什麼都重要。謝謝。 – Benjamin

@Benjamin沒問題。祝好運與您的其他網站！ –

是的，不要使用固定的寬度。爲什麼不在CSS中將一個img響應類放到元素寬度最小高度？ – bep42

您已將固定的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">

來源

2015-08-23 09:30:39

我不明白爲什麼'col-md-2'應該放在* 元素的內部。不應該用'col - * - *'包裝元素嗎？有什麼不同？ – Benjamin

'.col-md- *'具有響應寬度。 –

Bootstrap縮略圖在較小屏幕上重疊其他元素

回答

相關問題