0

「はい」と「いいえ」で答えることができる一連の質問があり、オプションのいずれかを選択すると、さらにフィールドを表示する必要があります。
そのため、各質問を 1 つrowにまとめ、ユーザーがオプションを選択すると、すべての子フィールドを垂直に表示する必要があります。子フィールド div は異なる背景色で表示される必要があります。
何が起こっているのですか：

  1. すべてchildFieldsが一列に収まろうとしています。
  2. の背景色がdiv.childFields行の幅に引き伸ばされています。


HTML

<div class="row row-padded">
        <p>Question: Are you 18 years old?</p>
        <p>Answer:</p>
        <div class="radio-inline">
          <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">Yes</label>
        </div>
        <div class="radio-inline">
          <label><input type="radio" name="optionsRadios1" id="optionsRadios2" value="option1">No</label>
        </div>
        <div class="childFields">
            <p class="">Give full details here: </p>
            <label class="pocLabel">Details</label>
            <input type="text" name="city">
            <label class="pocLabel">Dates and Duration</label>
            <input type="text" name="city">
            <label class="pocLabel">Details</label>
            <input type="text" name="city">
            <label class="pocLabel">Dates and Duration</label>
            <input type="text" name="city">
        </div>
     </div>

CSS:

.row-padded {
  padding-left:25px;
  padding-top:10px;
  padding-bottom:10px;
  background-color: #FFFFFF;
  border: 1px solid #DDD;
  border-radius: 6px;
}
div.childFields {
    padding:20px;
    background-color: #bbb;
}
4

1 に答える 1

0

Bootstrap のドキュメント ( http://getbootstrap.com/css/#forms ) に記載されているマークアップ構造/クラスを使用して、問題 #1 を解決できるはずです。

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
 <!-- ... --->
</form>

＃2について：ブロックレベル要素のように表示したくないchildFields（つまり、全幅を取る）場合は、 にしdisplay:inlineます。別のオプションは、それに固定幅を割り当てることです。

于 2013-08-19T13:44:00.517 に答える