带有输入预置的自举中心输入

<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="offset4 span4"> 
       <h1 class="text-center">Days</h1> 
       <form method="post" action="proc/days.php" id="jobs"> 
        <div class="input-prepend"> 
         <span class="add-on">Job Count</span> 
         <input type="text" class="day1"> 
        </div> 
        <div class="input-prepend"> 
         <span class="add-on">Day Name</span> 
         <input type="text" class="day2"> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</body>

是我的主要代码块（将所有其他内容分开）。我想让input-prepend占据span4中的所有可用宽度。带有输入预置的自举中心输入

现在，我能找到的唯一技巧最终失效了，或者变得越来越大。

另外，我正在使用Cosmo Bootswatch主题。

来源

2013-03-05 ixchi

如果你有左/右填充应用于'input-prepend'，请记住将宽度设置为'100％'会使它扩展到父容器之外（因为填充增加了宽度）。除此之外，你应该发布你的代码的工作示例。如果没有HTML和CSS，就几乎不可能看到发生了什么。 – Axel 2013-03-05 23:42:52

@Axel [here]（http://vps.syfaro.net/DutyRoster/days.php）是我的代码的现场版本。 – ixchi 2013-03-05 23:46:51

设置.day宽度为1到76％（填充和边框被认为是等等）将填满您的空间。问题是，你有另一个元素取决于.day1类。因此，添加ID，或例如像：

<input type="text" class="day1" id="day1">

，然后在你的CSS使用#day1 {width:76%;}。尽管（通过媒体查询）屏幕宽度更改，但您很可能需要调整宽度大小。

来源

2013-03-06 00:00:01 Omega

这个效果很好。你有什么机会知道媒体查询所需的CSS？我不确定你是如何做到的。 – ixchi 2013-03-06 00:03:21

太棒了！以下是媒体查询的引导说明：http：//twitter.github.com/bootstrap/scaffolding.html#responsive应该给出一个好的开始。 – Omega 2013-03-06 14:37:39

带有输入预置的自举中心输入

回答

相关问题