引導CSS移動調整問題

我在將頁面重新調整爲移動大小時遇到了使用Bootstrap的問題。輸入表單正在轉向內聯，並且一旦窗口調整大小，我正在使用的圖形不會保持在同一位置。在調整窗口大小之前和之後，我在下面列出了兩張圖片。輸入部分引導CSS移動調整問題

HTML代碼：

 <div class="col-sm-4" id="end"> 
      <div class="row"> 
       <div class="col-sm-6" id="start"> 
        <span class="top">Date and Time</span> 
        <div class="input-group"> 
         <div class = "input-group-addon"><span id="icon" class="glyphicon glyphicon-time"></span></div> 
         <input type="text" class="col-xs-4" id="date"> 
         <input type="text" class="col-xs-4" id="time"> 
        </div> 
        <button type="button" class="btn btn-info btn-sm" id="submit" onclick="getData()">Search</button> 
       </div> 
       <div class="col-sm-6" id="start"> 
       </div> 
      </div> 

     </div>

CSS日期和時間的ID：

#date { 
max-width: 100px; 
min-width: 100px; 
font-size: 12px; 
} 

#time { 
max-width: 100px; 
min-width: 100px; 
margin-bottom: 0px; 
font-size: 12px; 
}

Normal sized look

Mobile sized look

來源

2017-10-11 Nexxus

你的HTML是不正確的 – LSKhan

什麼是不正確的？ – Nexxus

如果調整您的#date和#time機器人h到min-width: 100px和max-width: 100px，你的div不會大於或小於100px。也許你應該使用三個聲明，如： width: 150px，min-width: 100px和max-width: 200px;

另一種方式是百分比大小或@media screen and (...)

w3schools已想通了一個學習如何與處理一個很好的實況全部不同的上漿方式。

來源

2017-10-11 19:57:32

哦，這是有趣的，我沒有看到這之前謝謝分享 – Nexxus

有這麼多的網站要學習這麼多！請參閱：[css技巧]（https://css-tricks.com/），[codepen]（https://codepen.io/），並嘗試自己的內容並加以使用[jsfiddle]（https：// jsfiddle .net /） –

這不是最美的解決方案，但您可以嘗試強制「輸入」的寬度，因爲它可以與class="col-lg-12"一樣寬。

像這樣：

 <div class="col-sm-4" id="end"> 
     <div class="row"> 
      <div class="col-sm-6" id="start"> 
       <span class="top">Date and Time</span> 
       <div class="input-group"> 
        <div class = "input-group-addon"><span id="icon" class="glyphicon glyphicon-time" ></span></div> 
        <input type="text" class="col-lg-12" id="date"> 
        <input type="text" class="col-lg-12" id="time"> 
       </div> 
       <button type="button" class="btn btn-info btn-sm" id="submit" onclick="getData()">Search</button> 
      </div> 
      <div class="col-sm-6" id="start"> 
      </div> 
     </div>

來源

2017-10-11 20:04:52 GrimbiXcode

謝謝，這似乎保持輸入居中，當我改變寬度，但它不保持接近輸入的圖形仍然。 – Nexxus

引導CSS移動調整問題

回答

相關問題