在標籤內輸入引導樣式

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>