Html 不使用row类的双柱网轴线_Html_Css_Twitter Bootstrap_Freemarker

Html 不使用row类的双柱网轴线

html css twitter-bootstrap

Html 不使用row类的双柱网轴线,html,css,twitter-bootstrap,freemarker,Html,Css,Twitter Bootstrap,Freemarker,我在freemarker的帮助下在运行时生成HTML页面。这对HTML生成部分造成了一些限制。当前，要在两个网格列中显示输入字段，我需要定义每一行并将字段放入其中。当前HTML <body class="container"> <div class="section-outline"> <div class="row-fluid show-grid"> <div class="span6 form-inline

我在freemarker的帮助下在运行时生成HTML页面。这对HTML生成部分造成了一些限制。
当前，要在两个网格列中显示输入字段，我需要定义每一行并将字段放入其中。
当前HTML

<body class="container">
    <div class="section-outline">
        <div class="row-fluid show-grid">
        <div class="span6 form-inline"><label class="pocLabel">First Name:</label><input type="text" required/></div>
        <div class="span6 form-inline"><label class="pocLabel">Middle Initial:</label><input type="text" /></div>
        </div>
        <div class="row-fluid show-grid">
        <div class="span6 form-inline"><label class="pocLabel">Last Name:</label><input type="text" required/></div>
        <div class="span6 form-inline"><label class="pocLabel">Social Security Number:</label><input type="text"/></div>
        </div>

这里

.show-grid [class*="span"] {
    text-align: left;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    min-height: 40px;
    line-height: 40px;
    margin-top: 10px;
    display: inline;
}
label.pocLabel {
    width: 200px;
    vertical-align: middle;
}
.section-outline {
    position: relative;
    margin: 15px 0;
    padding: 39px 19px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

}

您可以使用：nth子项，但这仅在最近的浏览器中受支持

.show-grid .span:odd {
   /* Your css for left floating */
}

.show-grid .span:even {
   /* Your css for right floating */
}

如果您需要支持较旧的浏览器，您可以更改字段的顺序，并将其浮动到彼此相邻的位置。

如果您希望这样做，而不将span6放在行内，则首先需要清除主容器div中使用的行流体。只需使用行并应用偏移，即可将所需div移动到对，喜欢这支钢笔吗

名字：中间字首：姓氏：

社会保险号码：这就是你要找的吗：

或

否则？

我尝试使用第n个孩子（偶数）和第n个孩子（奇数），但都没有内联属性。这两个都给了我相同的结果。您对

的理解是正确的，但是我想要一个div内联的

和

字段。好的，我只是不太明白您对标签/输入的期望是什么？它们应该并排，还是在彼此的顶部（）？标签/输入并排，但它们的div在两列网格中？事实上，我需要一幅画来理解：）？在这里，标签/输入相互重叠。什么不起作用？

.show-grid .span:odd {
   /* Your css for left floating */
}

.show-grid .span:even {
   /* Your css for right floating */
}

.span6.form-inline {
    display:inline-block;
    width:49%;
}
.span6.form-inline label {
    width:200px;
    display:inline-block;
}

.span6.form-inline {
    float:left;
    width:50%;
}
.span6.form-inline label {
    width:200px;
    display:inline-block;
}