Question

我希望textfield的大小说＆＃34; X＆＃34; px。现在，为了使页面响应，我删除了size属性。但是这种变化减少了textfield的实际大小。有没有办法增加输入框的大小（不使用size属性）并使其响应？我使用了bootstrap 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

在bootstrap div中设置输入字段的宽度为100％，以它为准。将宽度设置为％将使其响应以适应所有视口。

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

默认情况下，Bootstrap会处理装订线宽度。您不必添加额外的类来设置div的宽度。

Answer 2

这样的事可能适合你：

＆＃13;

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

＆＃13;

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

＆＃13;

只有问题是（没有差距，或取决于差距的大小），<div>和<input>之间不能有空格。如果这样做，布局可能会中断。

这是另一个没有间隙的选项，但请注意标签之间缺少空白。这很重要。

此外，<input>上的默认边框和填充也会被删除，因为必须对其进行控制才能达到100％（您不能相信浏览器使用输入边框和填充做什么）。

＆＃13;

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

＆＃13;

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

＆＃13;

为了获得固定的宽度差距，您也可以将百分比值更改为px值，然后使用@media CSS开关（类似@media all and (max-width:480px)调整不同屏幕尺寸的px值。

Answer 3

您可以在CSS中使用媒体查询

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

替代删除响应式页面的大小属性

3 个答案: