Question

我想要这种设置，如下面的屏幕截图所示。

但是目前使用我编写的代码，我得到的是以下输出。我尝试了各种选项但无法获得与上面相同的输出。

我目前的HTML代码：

<form role="form" class="form-horizontal">
                                <div class="form-group">
                                    <label style="" for="inputPackageName" class="col-sm-2 control-label">Package Name
                                    </label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" id="inputPackageName" placeholder="Package Name">
                                    </div>
                                    <label style="" for="inputApplicationName" class="col-sm-2 control-label">Application
                                        Name</label>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control" id="inputApplicationName"
                                            placeholder="Package Name">
                                    </div>
                                </div>
                            </form>

如何获取屏幕截图所需的布局。还有如何有效利用空白区域。即某些标签可能需要更多空间，有些可能需要更少空间。如何在bootstrap中保持一致性？

Answer 1

只是不要将类col-sm-2（在您的情况下）给予标签。尝试将此布局用于输入字段：

<div class="row">
   <div class="col-sm-6">
      <div class="form-group">
        <label>...</label>
        <input class="form-control" .../>
     </div>
  </div>
  <div class="col-sm-6">
     <div class="form-group">
        <label>...</label>
        <input class="form-control" .../>
     </div>
 </div>

这将呈现一个包含2列的行。要添加更多行，只需复制布局

即可

Answer 2

试试这个： `。＆LT; div class =“col-sm-6”＆gt; ... ＆LT; div class =“col-sm-6”＆gt; ...

<div class="col-md-12">
 < div class="col-sm-6">
     <div class="form-group">
      <label>...</label>
      <input class="form-control" .../>
   </div>
  </div>
  <div class="col-sm-6">
    <div class="form-group">
      <label>...</label>
       <input class="form-control" .../>
   </div>
  </div>
</div>

<div class="col-md-12">
 < div class="col-md-12">
  <div class="form-group">
    <label>...</label>
    <input class="form-control" .../>
 </div>
  </div>
</div>

`

Answer 3

这应该给你你想要的东西（只要你没有其他可以覆盖Bootstrap的CSS规则）：

    <form class="form-horizontal">
      <div class="form-group">
        <label for="inputProjectId" class="col-sm-2 control-label">Project ID</label>
        <div class="col-sm-4">
          <input type="text" class="form-control" id="inputProjectId" placeholder="Project ID">
        </div>

        <label for="inputProjectName" class="col-sm-2 control-label">Project Name</label>
        <div class="col-sm-4">
          <input type="text" class="form-control" id="inputProjectName" placeholder="Project Name">
        </div>
      </div>
      <div class="form-group">
        <label for="inputReleaseDate" class="col-sm-2 control-label">Release Date</label>
        <div class="col-sm-4">
          <input type="text" class="form-control" id="inputReleaseDate" placeholder="Release Date (mm/dd/yyyy)">
        </div>

        <label for="inputSupervisor" class="col-sm-2 control-label">Supervisor</label>
        <div class="col-sm-4">
          <input type="text" class="form-control" id="inputSupervisor" placeholder="Supervisor">
        </div>
      </div>
      <div class="form-group">
        <label for="inputProjectDescriptiond" class="col-sm-2 control-label">Project Description</label>
        <div class="col-sm-10">
          <textarea class="form-control" id="inputProjectDescriptiond" rows="3" placeholder="Enter Project Description"></textarea>
        </div>
      </div>
    </form>

Answer 4

只需粘贴此代码：

<form role="form" class="form-horizontal">
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="inputProjectID" class="col-sm-4 control-label">Project ID</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="inputProjectID" placeholder="Project ID">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="inputProjectName" class="col-sm-4 control-label">Project Name</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="inputProjectName"
                                placeholder="Project Name">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="inputReleaseDate" class="col-sm-4 control-label">Release Date</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="inputReleaseDate" placeholder="Release Date (mm/dd/yyyy)">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label for="inputSupervisor" class="col-sm-4 control-label">Supervisor</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="inputSupervisor" placeholder="Supervisor">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="form-group">
                <label for="inputProjectDescription" class="col-sm-2 control-label">Project Description</label>
                <div class="col-sm-10">
                    <textarea class="form-control" id="inputProjectDescription" rows="3" placeholder="Enter Project Description"></textarea>
                </div>
            </div>
        </div>
    </form>

希望这会对你有所帮助!!

Answer 5

终于有了更好的＆amp;以我想要的方式实现简单。下面是代码！

<form class="form-horizontal" id="main-form" role="form" data- toggle="validator" action="blank.html" method="post">
    <!-- Text input-->
    <div class="form-group">
        <label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
        <div class="col-md-3 col-3-input">
            <input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID" class="form-control input-md">
        </div>
        <label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
        <div class="col-md-3 col-3-input">
            <input id="inputProjectName" name="inputProjectName" type="text" placeholder="Your Project Name" class="form-control input-md">
        </div>
    </div>

    <!-- Text input-->
    <div class="form-group">
        <div class="group">
            <label class="col-md-2 control-label" for="datepicker">Release Date </label>
            <div class="col-md-3 col-3-input">
                <input id="datepicker" name="inputReleaseDate" type="text" placeholder="Select Release Date" class="form-control input-md">
            </div>
        </div>
        <div class="group">
            <label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label>
            <div class="col-md-3 col-3-input">
                <input id="textinput" name="textinput" type="text" placeholder="Your Supervisor's Name" class="form-control input-md">
            </div>
        </div>
    </div>

    <!-- Text area -->
    <div class="form-group">
        <label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label>
        <div class="col-md-9 col-9-input">
            <textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc" name="inputProjectDesc" placeholder="Your Project Description"></textarea>
        </div>
    </div>
</form>

Bootstrap Form组

5 个答案: