Twitter bootstrap:嵌套字段集?

时间:2012-07-25 15:04:58

标签: css twitter-bootstrap fieldset

我需要以一种我可以使用twitter bootstrap的方式完成这样的事情。

<fieldset>
    <legend>Main Section</legend>
    <div class="left-column">
        some stuff here
    </div>
    <div class="right->column">
        <fieldset>
            <legend>A form inside</legend>
            form here
        </fieldset>
    </div>
</fieldset>

Bootstrap出于某种原因,在没有边框的情况下对场地集进行样式设置。如果我添加边框和一些填充,我无法再与网格正常工作。结果总是搞砸了。我需要在带有边框的模型中看起来像fieldset,边框内部有一些填充和标签(这很容易;))。

那么通过使用bootstrap并遵循其原则来实现这一目标的最佳方法是什么?

Example

编辑:更好,但出于某种原因我不喜欢这个解决方案......

        <fieldset class="row fieldset">
            <legend>Main Section</legend>
            <div class="span6">
                some stuff here
            </div>
            <div class="span6">
                <fieldset class="fieldset">
                    <legend>A form inside</legend>
                    form here
                </fieldset>
            </div>
        </fieldset>

.fieldset {
    border: 1px solid #ccc;
    padding: 10px;
}

.fieldset .span6 {
    width: 560px;
}

1 个答案:

答案 0 :(得分:3)

<div class='container'>
  <fieldset class="fieldset">
    <legend>Main Section</legend>
    <div class="row-fluid">
      <div class="span6">
        some stuff here
      </div>
      <div class="span6">
        <fieldset class="fieldset">
          <legend>A form inside</legend>
            form here
        </fieldset>
       </div>
  </fieldset>
</div>

.fieldset {
    border: 1px solid #ccc;
    padding: 10px;
}

http://jsfiddle.net/baptme/ppxGG/