按鈕覆蓋在xs視口，因爲沒有自動調整大小

-1

我有一行（div標記類爲col-xs-6）與2列相同的寬度。在每列內部，有一個自動調整大小的按鈕，最大寬度爲150px，取決於內部文本的長度。所以我在按鈕內輸入非常長的文本，以便它們具有相同的最大寬度，即150px。然後我會自動調整窗口大小到xs視口，直到一個尺寸（我認爲窗口的寬度小於300px加上填充），然後按鈕重疊在一起。按鈕覆蓋在xs視口，因爲沒有自動調整大小

input[type="submit"] { 
 
    position: relative; 
 
    min-height: 34px; 
 
    margin: 0 auto; 
 
    min-width: 80px; 
 
    max-width: 150px; 
 
    padding: 0 10px; 
 
    width: auto; 
 
    display: block; 
 
    border-radius: 5px; 
 
    background-color: #ff7900; 
 
    color: white; 
 
    border: 1px solid #ff7900; 
 
} 
 

 
.nf-filler-control input[type="submit"] { 
 
    display: inline-block !important; 
 
} 
 

 
.nf-button { 
 
    display: inline-block; 
 
    position: relative; 
 
    color: white; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div> 
 
    <div style="background:green;" class="col-xs-6"> 
 
    <div> 
 
     <div class=" nf-filler-control nf-filler-highlightonvalidationerror nf-button"> 
 
     <input type="submit" value="As he crossed tosssss sxcffffxxx" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div style="background:red;" class="nf-col col-xs-6"> 
 
    <div> 
 
     <div class=" nf-filler-control nf-filler-highlightonvalidationerror nf-button"> 
 
     <input type="submit" value="As he crossed tosssss sxcffffxxx" /> 
 
     </div> 
 
    </div> 
 
    </d

的問題是：目前，div標籤自動調整但按鍵保持相同的寬度（不自動調整大小隨着父div標籤）。所以它們溢出父div標籤外並相互重疊。

我期待在這裏：

解決方案1：當我自動調整窗口的大小，div標籤自動調整，但這些按鈕仍然保持相同的寬度，以便於一個點上，沒有足夠的空間因此它應該分成兩行（每行一個按鈕）
解決方案2：當我自動調整窗口大小時，div標記自動調整大小，然後按鈕自動調整大小（它們應該始終位於div標記內，不溢出）

下面是我在小提琴

https://jsfiddle.net/toy56gyf/2/

來源

2017-07-28 Hà Xinh

之所以它不會重新大小，是因爲他們有一個靜態的寬度和高度，由於您使用的像素作爲格式的事實代碼。把你所有的px改成vw和vh。你還應該添加top: 0px; left: 0px; position absolute;的CSS，然後用Transform: translate(0-100vw, 0-100 vh);

這四處移動它會確保它不走動，而且它重新大小正確:-)

來源

2017-07-28 05:17:23 D3nj1

按鈕覆蓋在xs視口，因爲沒有自動調整大小

回答

相關問題