Question

<form class="col-xs-12 col-sm-12 col-md-12 col-lg-12>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">Name</div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4>
        <input type="text" class="name">
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <span class="messages"></span>
    </div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">Email</div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <input type="text" class="email" id="email">
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <span class="messages"></span>
    </div>
</div>
...

我需要单独在桌面视图中显示文本框（第二个div）下面的验证消息（第3个div）。在平板电脑和移动设备中，我需要逐个div。即标签 2.文本框 3.消息

有没有什么我可以通过bootstrap类实现这一点？

Answer 1

是的，您可以使用容器类，然后在该行类中使用col-lg-4等注意：请尝试使用

<div class="container-fluid">
<div class = "row">
    <div class="form-group">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">Name</div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
        <input type="text" class="email" id="email"></div></div>
    <div class="form-group">
   <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
       <span class="messages">msg code</span>
    </div></div>
    <div class="form-group">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">Email</div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <input type="text" class="email" id="email">
        </div></div>
    </div>
</div>

Answer 2

this link is helpful for validation with demo pls check it out

http://formvalidation.io/examples/changing-success-error-colors/

对齐所有设备中的标签，文本框和消息

2 个答案: