応答性のあるページのサイズ属性を削除する代わりに

Question

textfield "X" pxとしたい。ページを反応させるために、size属性を削除しました。しかしこの変更により、実際のサイズはtextfieldに減少しました。入力ボックスのサイズを増やす（size属性を使用しない）方法はありますか？私はブートストラップcol-xs-2などを使用しましたが、それは私のカスタマイズされたレイアウトを助けていません。また、私がこのような問題を抱えているのは初めてではないことに注意してください。それは、divとボタンの特別な配置が連続して発生し、すべてのビューポートで一貫して見えるようにするための要件で発生します。誰かが同じような問題に直面して同じことをした場合、あなたの考えを分かち合いましょう。

すべての解像度でギャップを一定にしたいと思っています。ブートストラップDIV内部100％に入力フィールドの幅を設定size属性値と

[div]gap[textfield]gap[div] 

<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

CSSメディアクエリを使用することができます。

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

固定幅のギャップを持つために、あなたはその後、@media CSSスイッチ（調整する@media all and (max-width:480px)のようなものを使用px値にパーセント値を変更することで、同様のことを行うことができますpx異なる画面サイズの値

Answer 2

23として、それはいずれ。幅を％に設定すると、すべてのビューポートに適応するように応答します。

<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

あなたはこのような何かがあなたのために働くかもしれない

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