与引导

创建reponsive输入表格

我想实现的截图所示的屏幕。但我无法控制元素之间的空间。我希望它能够响应，但我想这次我无法管理高分辨率屏幕布局。代码如下，我添加了屏幕的线框。在添加包含前面加上一些元素总是毁了我的妇女警察:)

![<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span8"> 
     <h1>Formulate</h1> 
    </div> 
    <div class="span4 pull-right">&nbsp;</div> 
    </div> 
    <div class="row-fluid"> 
    <form class="well span12"> 
     <div class="row-fluid"> 
     <div class="span12"> 
      <label>Formula Name</label> 
      <input type="text" class="span8"> 
     </div> 
     <div class="span8">&nbsp;</div> 
     </div> 
     <div class="row-fluid"> 
     <div class="span3"> 
      <label>My Label</label> 
     </div> 
     <div class="span3"> 
      <div class="input-prepend"> 
      <span class="add-on">@</span> 
      <input type="text" class="input-medium"> 
      </div> 
     </div> 
     <div class="span3">+</div> 
     <div class="span3"> 
      <select> 
      <option>Option 1</option> 
      <option>Option 2</option> 
      <option>Option 3</option> 
      </select> 
     </div> 
     </div> 
     <div class="row-fluid"> 
     <div class="span3"> 
      <label>My Label</label> 
     </div> 
     <div class="span3"> 
      <div class="input-prepend"> 
      <span class="add-on">@</span> 
      <input type="text" class="input-medium"> 
      </div> 
     </div> 
     <div class="span3">+</div> 
     <div class="span3"> 
      <select> 
      <option>Option 1</option> 
      <option>Option 2</option> 
      <option>Option 3</option> 
      </select> 
     </div> 
     </div> 
     <div class="row-fluid"> 
     <div class="span3"> 
      <label>My Label</label> 
     </div> 
     <div class="span3"> 
      <div class="input-prepend"> 
      <span class="add-on">@</span> 
      <input type="text" class="input-medium"> 
      </div> 
     </div> 
     <div class="span3">+</div> 
     <div class="span3"> 
      <select> 
      <option>Option 1</option> 
      <option>Option 2</option> 
      <option>Option 3</option> 
      </select> 
     </div> 
     </div> 
     <div class="row-fluid"></div> 
     <div class="row-fluid"> 
     <div class="span3"> 
      <label>My Label</label> 
     </div> 
     <div class="span3"> 
      <div class="input-prepend"> 
      <span class="add-on">@</span> 
      <input type="text" class="input-medium"> 
      </div> 
     </div> 
     <div class="span3">+</div> 
     <div class="span3"> 
      <select> 
      <option>Option 1</option> 
      <option>Option 2</option> 
      <option>Option 3</option> 
      </select> 
     </div> 
     </div> 
     <div class="row-fluid"> 
     <div class="form-actions pull-right"> 
      <button type="submit" class="btn btn-primary">Submit</button> 
      <input type="reset" class="btn" value="Reset"> 
     </div> 
     </div> 
    </form> 
    </div> 
</div>][3]

编辑：

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Pagetitle</title> 
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"> 
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"> 
<!-- HTML5 shim for IE backwards compatibility --> 
<!--[if lt IE 9]> 
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head>

来源

2013-04-10 cevizmx

链接到一个例子会很有帮助。 – Stefan 2013-04-10 11:25:59

一个例子？其实没有:(但http://jsfiddle.net/AmhHf/在jsfiddle上试过了，也许这可以提供帮助。 – cevizmx 2013-04-10 12:20:17

你确定你正在加载bootstrap-responsive文件吗？你可能在你的主目录中有@media查询bootstrap too但我看不到它们 – Stefan 2013-04-10 13:08:57

这似乎与a bug in bootstrap将得到解决在v3中。

按照该链接的评论之一，现在你可以使用这个jQuery的片段来解决这个问题：

jQuery(function($) { 
    $(window).resize(function() { 
    $(".input-prepend, .input-append").each(function(index, group) { 
     var input = $("input", group).css('width', ''); 
     $(".add-on, .btn", group).each(function() { 
     input.css('width', '-=' + $(this).outerWidth()); 
     }); 
    }); 
    }).trigger('resize'); 
});

我建议你改变类的你输入input-block-level。

<div class="row-fluid"> 
    <div class="span3"> 
    <label>My Label</label> 
    </div> 
    <div class="span3"> 
    <div class="input-prepend"> 
     <span class="add-on">@</span> 
     <input type="text" class="input-block-level"/> 
    </div> 
    </div> 
    <div class="span3">+</div> 
    <div class="span3"> 
    <select class="input-block-level"> 
     <option>Option 1</option> 
     <option>Option 2</option> 
     <option>Option 3</option> 
    </select> 
    </div> 
</div>

看到这个updated jsfiddle以及如何投入第一线，现在重新调整正确。

来源

2013-04-10 19:11:43 ngm

抱歉，代码工作时忘了谢谢你:) – cevizmx 2013-07-23 16:40:49

回答

相关问题