17

私はフォームを持っていて、行と混同しています。

行はどこに配置すればよいですか？それらが必要ですか？モーダルに必要ですか？フォーム全体またはフォーム入力ごとに 1 つですか?

ここに私が持っているものがあります:

<div class="container">
  <div id="modal" class="modal fade">
  //modal stuff
  </div><!-- /.modal -->

  <h1>Title Here</h1>
  <form id="content-add-form" class="form-horizontal" role="form" name="content-add-form" enctype="multipart/form-data">

   <div class="form-group">
        <label for="title" class="col-md-2 control-label">Title:</label>
        <div class="col-md-4">
            <input name="title" type="text" class="form-control" placeholder="Title">
        </div>
    </div>

    <div class="form-group">
        <label for="date" class="col-md-2 control-label">Date:</label>
        <div class="col-md-2">
            <div class='input-group date' id='date-picker'>
                <input type='text' class="form-control" name="date" value="{{ date("d-m-Y") }}" data-format="dd-MM-yyyy" readonly/>
                <span class="input-group-btn">
                    <button class="btn btn-default datepicker-invoker" type="button"><i class="icon-calendar"></i></button>
                </span>
            </div>
        </div>
    </div>


</form>

4

3 に答える 3

15

<div class="row">たとえば、セクションを開始するたびに使用colsします。たとえば、3 つのセクションがあるとします。最初の行には 12 列が必要です。これらの 12 列を 12 までカウントする例の下にリストした行にラップします。2 番目に 3 列が必要です。これらの列では、例として、ナビゲーション メニュー、いくつかのテキスト コンテンツ、および画像が必要であるとしましょう。ラップします。行の列。最初の 2 つと同じで、3 番目の列には画像といくつかのコンテンツのみが必要です。私も同じルールに従います。

<div class="row">
  <div class="col-md-1">one</div>
  <div class="col-md-1">two</div>
  <div class="col-md-1">three</div>
  <div class="col-md-1">four</div>
  <div class="col-md-1">five</div>
  <div class="col-md-1">six</div>
  <div class="col-md-1">seven</div>
  <div class="col-md-1">eight</div>
  <div class="col-md-1">nine</div>
  <div class="col-md-1">ten</div>
  <div class="col-md-1">eleven</div>
  <div class="col-md-1">twelve</div>
</div>

<div class="row">
  <div class="col-md-4">nav-menu</div>
  <div class="col-md-4">content</div>
  <div class="col-md-4">image</div>
</div>

<div class="row">
  <div class="col-md-6">image</div>
  <div class="col-md-6">content</div>
</div>
于 2013-10-02T14:45:39.983 に答える
2

混乱が見られると思います。フォームにはさまざまな行に多くのフィールドがありますが、必ずしもそれぞれに Bootstrap の「行」を使用するとは限りません。

できることは、Bootstrap の「行」を 1 つだけ使用し、各ラベル/フィールドのペアを独自の div に配置することです。その div 内で、ラベルとフィールドには独自の div があり、Boostrap col-information があります。これにより、多くの行を持つフォームが得られ、Bootstrap で期待される望ましいラッピング効果が得られます。

以下の例は MVC フォームです。MVC 構文に惑わされないでください。@Html.Label & Editor を HTML ラベル & 入力フィールドに置き換えることができます。

<div class="container">
    <div class="row">

    @using (Html.BeginForm("MyAction", "MyController", Model))
        {
        @Html.AntiForgeryToken()
            <div class="form-group">
                <div class="col-md-4">
                    @Html.LabelFor(model => model.PersonFirstName)
               </div>
                <div class="col-md-8">
                    @Html.EditorFor(model => model.PersonFirstName, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter your first name" } })
                    @Html.ValidationMessageFor(model => model.PersonFirstName, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    @Html.LabelFor(model => model.PersonSurname)
               </div>
                <div class="col-md-8">
                    @Html.EditorFor(model => model.PersonSurname, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter your surname" } })
                    @Html.ValidationMessageFor(model => model.PersonSurname, "", new { @class = "text-danger" })
                </div>
            </div>
        }
    </div>
</div>
于 2015-08-07T09:21:01.440 に答える