用于标签内

时间：2015-07-21 16:01:49

标签： html css twitter-bootstrap twitter-bootstrap-3

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

Bootply

enter image description here

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

enter image description here

enter image description here

如何使输入answer1和textarea answer2具有相同形式的Name和Id之类的Bootstrap样式，并且还与其周围的标签内联？

代码

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;
}

1 个答案:

答案 0 :(得分：1)

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

解决方案：

JSFiddle

＆＃13;
＆＃13; 
$('#sName').on('input', function () {
    $('.sname').html($('#sName').val() ? $('#sName').val() : "Student");
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题