1

当我调整这个小提琴的大小时，当我缩小屏幕时输入框会变大。不幸的是，在 iPhone 上，它在我的应用程序中消失了。

这是小提琴： http: //jsfiddle.net/v6Bhx/5/embedded/result/这是代码：

<div class="row-fluid">
<div class="span6">
    <table width="500">
        <tr>
            <td>
                <div class="input-prepend">
                   <span class="add-on">$</span>
                   <input type="text" name="fee" value="" class="span6" />

                </div>
            </td>
       </tr>
  </table>
</div>
<div class="span6">Test</div>
</div>

也是的，我意识到我正在使用表格。我这样做不是为了格式化数据，它实际上是用于表格数据，其中恰好有输入框。

4

3 回答 3

0

当视点缩小到移动设备大小时，将表格宽度设置为 500px 可能会导致问题。尝试删除表格宽度，看看会发生什么。

更新

我无法准确描述您希望最终页面和表格的外观，但您可以检查以下几点。

关于 iPhone 显示问题，请确保在您的页面头部有： 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我认为指定 100% 的表格宽度将是无效的 HTML5。我怀疑这是你问题的根源，但在你的 CSS 中尝试这样的事情： 

.span6 table{
width:100%;
}

我可以看到在表格中添加带有输入的表单将是一个挑战。如果没有办法解决这个问题，那么你现在有一个嵌套问题—— input.span6 实际上嵌套在另一个 span6 列中。

一般来说，带有流动行的嵌套网格的 HTML 是：

<div class="row-fluid">  
<div class="span6">  

  <div class="row-fluid"> <!-- start nested grid -->
  <div class="span12">
  <!-- Form and table details here -->
  </div> <!-- end nested span -->
  </div> <!-- end nested row -->  

</div> <!-- end span6 -->  

<div class="span6">  
  test  
</div>
</div>

有关完整详细信息， 请参阅http://twitter.github.com/bootstrap/scaffolding.html#gridSystem上的流体嵌套部分。

祝你好运！

于 2013-02-25T22:07:01.443 回答
0

我的建议是使用 table width="100%" .

<div class="row-fluid">
<div class="span6">
    <table width="100%">
        <tr>
            <td>
                <div class="input-prepend"> <span class="add-on">$</span>

                    <input type="text" name="fee" value="" class="span6"
                    />
                </div>
            </td>
        </tr>
    </table>
</div>
<div span="6">Test</div>
</div>
于 2013-02-26T01:28:44.313 回答
0

在滑块上设置宽度：

<input style="width:125px;" type="text" name="fee" value="" class="span6" />

或使用 css

.span6 { width: 125px; }

原因是表格在调整页面大小时改变了行宽

于 2013-02-25T23:47:38.463 回答