替代刪除大小屬性的響應頁面

Question

我想要textfield大小說「X」px。現在爲了使頁面響應，我刪除了size屬性。但是這個改變減少了textfield的實際尺寸。有沒有辦法增加輸入框的大小（不使用size屬性）並使其響應？我使用引導程序col-xs-2等，但是這不幫助我的自定義佈局。另外請注意，這不是我第一次遇到這樣的問題。它發生在一個要求中，連續發生div和按鈕的特殊排列，並使其在所有視口中看起來一致。請分享你的想法，如果有人遇到類似的問題，並修復相同的問題。

編輯 我想讓所有分辨率的差距一致。

[div]gap[textfield]gap[div] 

隨着尺寸屬性值作爲23

<div class="form-group"> 
    <div class="linstyle1"> 
     <label>text1</label> 
    </div> 

    <div id="some-textfield" class="left leftmargin"> 
    <!--struts tag populates a input field--> 
     <s:textfield name="input1" value="%{input}" size="23" maxlength="23" cssClass="form-control enter" required="required" /> 
    </div> 

    <div id="desktop" class="left leftmargin"> 
     <button class="btn btn-primary btn-table-responsive " type="submit" name="button1" title="button1"> 
     </button> 
    </div> 

</div> 

Answer 1

像這樣的事情可能會爲你工作：

.dPad { 
 
    position:absolute; 
 
    display:inline-block; 
 
    width:10%;background:#0f0 
 
} 
 
.inFlex { 
 
    position:absolute; 
 
    width:60%; 
 
    left:20%; 
 
    right:20% 
 
}

<div> 
 
    <div class="dPad" style="left:0px">left</div> 
 
    <input type="text" class="inFlex" /> 
 
    <div class="dPad" style="right:0px">right</div> 
 
</div>

唯一的問題是（無縫隙，或取決於間隙的大小），在<div>和0123之間不能有空格。如果這樣做，佈局可能會中斷。

這是另一個沒有間隙的選項，但要注意標籤之間缺少空白。這很重要。

此外，<input>上的默認邊框和填充已被移除，因爲必須控制該邊框和填充以達到100％（不能相信瀏覽器對輸入邊框和填充使用的是什麼）。

.dPad { 
 
    position:absolute; 
 
    display:inline-block; 
 
    width:15%;background:#0f0 
 
} 
 
.inFlex { 
 
    position:absolute; 
 
    width:69%; 
 
    left:15%; 
 
    right:15%; 
 
    border:0px; 
 
    padding:0.5em 0.5%; 
 
    background:#ff0 
 
}

<div><div 
 
    class="dPad" style="left:0px">left</div><input 
 
    type="text" class="inFlex" value="text field" /><div 
 
    class="dPad" style="right:0px">right</div></div>

爲了有一個固定寬度的縫隙，你可以做到這一點，以及通過改變百分比值到px值，然後使用@media CSS交換機（類似@media all and (max-width:480px)調整px values at different screen size。

Answer 2

輸入字段的寬度設置爲自舉DIV中100％，取它是。將寬度設置爲％based將使其適應所有視口。

<div class="form-group"> 
    <div class="col-sm-3"> 
     <label>text1</label> 
    </div> 

    <div id="some-textfield" class="col-sm-6"> 
     <!--struts tag populates a input field--> 
     <s:textfield name="input1" value="%{input}" maxlength="23" cssClass="form-control enter" required="required" /> 
    </div> 

    <div id="desktop" class="col-sm-3"> 
     <button class="btn btn-primary btn-table-responsive " type="submit" name="button1" title="button1"></button> 
    </div> 
</div> 

默認情況下，引導將照顧排水溝寬度。您不必添加額外的類來設置div的寬度。

Answer 3

您可以使用CSS媒體查詢

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries