Question

我想在网页中放两个表单，但另一个表单。像这样：

  <body id="Signup">


      <form class="row col-lg-6">

       <legend>Légende</legend>

          <div class="form-group">   
            <label for="text">Text : </label>
            <input id="text" type="text" class="form-control">
          </div>

          <div class="form-group">
            <label for="textarea">Textarea : </label>
            <textarea id="textarea" type="textarea" class="form-control"></textarea>
          </div>

          <div class="form-group">
            <label for="select">Select : </label>
              <select id="select" class="form-control">

                <option>Option 1</option>

                <option>Option 2</option>

                <option>Option 3</option>

             </select>
          </div>
        <br>
        <button>Envoyer</button>

      </form>



      <form class="row">formulaire</form>


  </body>

正如您所看到的，两个表单都使用.row类，但在显示页面时仍然是内联的。

我不知道我在这里失踪了什么。

Answer 1

您正在使用.col-lg-6以及.row应该是孩子，然后使用col-*-12来获得全宽

另外，您缺少.container作为父母。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form class="row">
    <div class="col-xs-12">
      <legend>Légende</legend>

      <div class="form-group">
        <label for="text">Text :</label>
        <input id="text" type="text" class="form-control">
      </div>

      <div class="form-group">
        <label for="textarea">Textarea :</label>
        <textarea id="textarea" type="textarea" class="form-control"></textarea>
      </div>

      <div class="form-group">
        <label for="select">Select :</label>
        <select id="select" class="form-control">

          <option>Option 1</option>

          <option>Option 2</option>

          <option>Option 3</option>

        </select>
      </div>
      <br>
      <button>Envoyer</button>
    </div>
  </form>



  <form class="row">
    <div class="col-xs-12">formulaire</div>
  </form>
</div>

Answer 2

你在做什么有点奇怪。您最好的选择是创建div行和列。然后div内部定义你的表格。但是，这里的真正问题是您将行类和列类都应用于第一个表单：

<form class="row col-lg-6">

您不能这样做，行和列必须单独定义：

<div class="row">
    <div class="col-lg-6">

    </div>
</div>

Answer 3

将row col-lg-6类与<form class="row col-lg-6">

替换为col-lg-12

Answer 4

你应该制作这样的结构：

<body id="Signup" class="row">//"row" should be a parent to columns


  <form class="col-lg-12"> //width:100% or col-lg-6 for width: 50%

   ...

  </form>



  <form class="col-lg-12">formulaire</form>

使用Bootstrap行类，却无法获得彼此相同的2个表单

4 个答案: