html - 标签内输入的 Bootstrap 样式

Question

我需要在 label 中有一个 input 或一个 textarea 并在我使用 Bootstrap 3 设置样式的表单中内联显示。以下代码只是一个示例，我的原始代码有所不同且更复杂。我想确保它们看起来与表单中的其余元素一致。

Bootply

我希望 label、input 和 textarea 看起来与 Bootstrap 表单样式一致，并尝试添加 control-label 和 form-control 类来获取 Bootstrap 样式，但它不起作用。

如何使输入 answer1 和文本区域 answer2 具有 Bootstrap 样式，如 Name 和 Id相同的形式并与周围的标签一致？

代码

HTML

<form class="form-horizontal padding-md" id="form1">
    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="form-group">
            <label class="control-label col-xs-5 col-sm-4 col-md-3" for="sName">Name</label>
            <div class="controls col-xs-7 col-sm-8 col-md-9"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Name of the student."></span>
                <input type="text" id="sName" name="Name" class="form-control" placeholder="Enter Name">
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="form-group">
            <label class="control-label col-xs-4 col-sm-3 col-md-3" for="sId">Id</label>
            <div class="controls col-xs-8 col-sm-9 col-md-9"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Id of the student."></span>
                <input type="text" id="sId" name="Id" class="form-control" placeholder="Enter Id">
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <label class="control-label col-xs-3 col-sm-2 col-md-1" for="answer1">1.</label>
            <div class="controls col-xs-9 col-sm-10 col-md-11"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Answer for first question."></span>
                <div class="inline">[<div class="sname">Student</div>'s answer: "<input type="text" id="answer1" name="Answer1" placeholder="Enter Answer">"]</div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <label class="control-label col-xs-3 col-sm-2 col-md-1" for="answer2">2.</label>
            <div class="controls col-xs-9 col-sm-10 col-md-11"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Answer for second question."></span>
              <div class="inline">[<div class="sname">Student</div>'s answer: "<textarea id="answer2" name="Answer2" placeholder="Enter Answer"></textarea>"]</div>
            </div>
        </div>
    </div>
    <div class="row pull-right">
        <button type="submit" class="btn btn-primary" id="submitAnswers">Submit Answers</button>
    </div>
</form> 

JavaScript

$('#sName').on('input', function() {
   $('.sname').html($('#sName').val()?$('#sName').val():"Student");
});

CSS

.help {
  position:absolute;
  right:-5px;
  top:8px;
}

.inline {
    display:inline-block;
    width:100%;
 }

.sname {
    display:inline;
}

.padding-md {
    padding: 25px;
}

Answer 1

在 Rachel 的帮助下在阅读了一些关于 display:table 的内容之后我通过使用 display:table 和 display:table-cell 找到了解决方案。这个解决方案非常接近我想要的，除了我不希望 sname1 和 sname2 的宽度是一个固定值。理想情况下，它应该根据 sName 中输入的名称宽度进行调整。在有人发布更好的解决方案之前，我将一直使用该解决方案。

解决方法:

JSFiddle

$('#sName').on('input', function () {
    $('.sname').html($('#sName').val() ? $('#sName').val() : "Student");
});

.help {
    position:absolute;
    right:-5px;
    top:8px;
}
.inline {
    display:table;
    font-weight:bold;
    width:100%;
}
.sname2, .tail2 {
    vertical-align:top;
}
.sname {
    display:inline;
}
.sname1, .sname2 {
    width:150px;
    font-weight:bold;
    display:table-cell;
}
.padding-md {
    padding: 25px;
}
.inline > .form-control {
    width:100%;
    display:table-cell;
}
.tail1, .tail2 {
    padding-left:10px;
    width: 30px;
    display:table-cell;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<form class="form-horizontal padding-md" id="form1">
    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="form-group">
            <label class="control-label col-xs-5 col-sm-4 col-md-3" for="sName">Name</label>
            <div class="controls col-xs-7 col-sm-8 col-md-9"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Name of the student."></span>
                <input type="text" id="sName" name="Name" class="form-control" placeholder="Enter Name" />
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="form-group">
            <label class="control-label col-xs-4 col-sm-3 col-md-3" for="sId">Id</label>
            <div class="controls col-xs-8 col-sm-9 col-md-9"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Id of the student."></span>
                <input type="text" id="sId" name="Id" class="form-control" placeholder="Enter Id" />
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <label class="control-label col-xs-1 col-sm-1 col-md-1" for="answer1">1.</label>
            <div class="controls col-xs-11 col-sm-11 col-md-11"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Answer for first question."></span>
                <div class="inline">
                    <div class="sname1">[<div class="sname">Student</div>'s answer: "</div>
                    <input type="text" id="answer1" class="form-control" name="Answer1" placeholder="Enter Answer" />
                    <div class="tail1">" ]</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12">
        <div class="form-group">
            <label class="control-label col-xs-1 col-sm-1 col-md-1" for="answer2">2.</label>
            <div class="controls col-xs-11 col-sm-11 col-md-11"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Answer for second question."></span>
                <div class="inline">
                    <div class="sname2">[<div class="sname">Student</div>'s answer: "</div>
                    <textarea id="answer2" class="form-control" name="Answer2" placeholder="Enter Answer"></textarea>
                    <div class="tail2">" ]</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row pull-right">
        <button type="submit" class="btn btn-primary" id="submitAnswers">Submit Answers</button>
    </div>
</form>