在标签内输入引导样式

Question

我需要在label内部有一个input或textarea，并在我的表单中内嵌显示，使用引导程序3进行样式设置。以下代码仅仅是一个示例，我的原始代码不同，更复杂。我想确保它们与表单中的其余元素保持一致。

Bootply

我想label，input和textarea看与引导表单样式一致，并尝试添加control-label和form-control类获取引导的造型，但它不工作。

如何使输入answer1和textarea的answer2有引导的造型就像在同一形式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

与帮助并在读了一些关于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>