Question

我无法弄清楚实际放置<label>元素背后的错综复杂的逻辑。我想要一个有两行的表格。我希望每行都有一个标签，然后是一个输入框。我希望响应行为，当视口变窄时，标签出现在输入上方。当宽标签留下并且输入正确时。

大部分时间都可以正常工作，但有时候<label>表现得如此奇怪，我很难尝试让一个简单的两行表单起作用。以下是样本：

<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="well">
     <div class="form-group">
          <label class="col-md-2 control-label">
            Reminder
          </label>
          <div class="col-md-5 container">
            <input type="text" class="form-control"/>
          </div>
          <div class="col-md-5 container">
            Minutes before meeting
          </div>
     </div>
     <!-- Form Control TYPE Begin -->
     <div class="form-group">
        <label class="col-md-2 control-label">Type</label>
        <div class="col-md-10">
          <div class="radio radio-primary">
            <label>
              <input type="radio" value="1"
                  class="form-control">
                  Circle Meeting
            </label>
            <label>
              <input type="radio" value="2"
                  class="form-control">
                  Operational Meeting
            </label>
          </div>
        </div>
     </div>
  </div>
<body>

我只花了15分钟使这个自我实现，所以你应该能够把它放在一个文件中并直接加载到浏览器中。

结果是，不是将标签放在左边，而是放在上面的行中（在那个DIV中）而不是在声明标签的DIV中。我尝试了很多操作，但是标签似乎想要＆＃34;跳跃＆＃34;在DIV中定义它，并在它之前的DIV中，并且弄乱了两个DIV标签的布局，这些标签是表格中的行。

看到＆＃34; Type＆＃34;标签不会出现在左边缘，而是漂浮在之前的DIV中，并且该DIV中的最后一个元素。

单选按钮的布局及其上的标签非常不方便。

如果有人能够解释发生了什么，以及如何在将来避免这种情况，我将非常感激。（不仅仅是这个案例的解决方案，而且还有一个解释，可以让我避免将来的情况。）

Answer 1

这应该解决它;在表单周围设置表单和字段标记;一些班级改变

  <div class="well">
  <form class="form-horizontal">
  <fieldset>
     <div class="form-group">
          <label class="col-md-2 control-label" for="textinput">
            Reminder
          </label>
          <div class="col-md-5">
            <input type="text" name="textinput" class="form-control"/>
          </div>
          <div class="col-md-5">
            Minutes before meeting
          </div>
     </div>
     <div class="form-group">
        <label class="col-md-2 control-label">Type</label>
        <div class="col-md-10">
            <label class="radio-inline" for="radios-1">
              <input type="radio" name="radios" id="radios-1" value="1">
                  Circle Meeting
            </label>
            <label class="radio-inline" for="radios-2">
              <input type="radio" name="radios" id="radios-2" value="2">
                  Operational Meeting
            </label>
        </div>
     </div>
     </fieldset>
     </form>
  </div>

为什么Bootstrap标签出现在错误的位置？

1 个答案: