Bootstrap标签+输入+文本位置

Question

我的元素位置有问题。 我希望每个输入和顶部都有标签。右边的一些文字（输入）。

＆＃13;

＆＃13;

<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-primary">

                <div class="panel-heading">
                   <h4 class="text-center">TEXT</h4>
                </div>
            
                <div class="panel-body">

                <form>
                        
                    
                  <div class="form-group">
                        <div class="pull-left" style ="margin-left:20px;">
                          <label for="1">1</label>       
                          <input id="1" type="number" class="form-control" style="width:120;"/>
                        </div>
                        <div class="pull-left" style ="margin-left:10px;">
                          <label for="2">2</label>
                          <input id="2" type="number" class="form-control" style="width:120;"/>
                        </div>
                        <div class="pull-left" style ="margin-left:10px;">
                          <label for="3">3</label>
                          <input id="3"type="number" class="form-control" style="width:120;"/>
                        </div>
                   </div>

        <br>

                  <div class="form-group">
                        <div class="pull-left" style ="margin-left:20px;">
                          <label for="4">4</label>       
                          <input id="4" type="number" class="form-control" style="width:120;"/>
                        </div>
                        <div class="pull-left" style ="margin-left:10px;">
                          <label for="5">5</label>
                          <input id="5" type="number" class="form-control" style="width:120;"/>
                        </div>
                        <div class="pull-left" style ="margin-left:10px;">
                         <label for="6">6</label>
                         <input id="6" type="number" class="form-control" style="width:120;"/>
                        </div>
                   </div>

                </form>

                </div>
                
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

但是当我在每个输入后添加一些不起作用的文本时。

我是初学者，所以我确信我错过了什么。 在此先感谢您的帮助。

Answer 1

喜欢这个吗？

<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-primary">

                <div class="panel-heading">
                   <h4 class="text-center">TEXT</h4>
                </div>
            
                <div class="panel-body">

                <form>
                        
                    
                  <div class="form-group">
                        <div class="pull-left" style ="margin-left:20px;">
                          <label for="1">1</label> </br>      
                          <input id="1" type="number" class="form-control" style="width:120;"/> sometext1
                        </div>
                        <div class="pull-left" style ="margin-left:10px;">
                          <label for="2">2</label></br>   
                          <input id="2" type="number" class="form-control" style="width:120;"/> sometext2
                        </div>
                        <div class="pull-left" style ="margin-left:10px;">
                          <label for="3">3</label></br>   
                          <input id="3"type="number" class="form-control" style="width:120;"/> sometext3
                        </div>
                   </div>

        <br>

                  <div class="form-group">
                        <div class="pull-left" style ="margin-left:20px;">
                          <label for="4">4</label>       
                          <input id="4" type="number" class="form-control" style="width:120;"/>
                        </div>
                        <div class="pull-left" style ="margin-left:10px;">
                          <label for="5">5</label>
                          <input id="5" type="number" class="form-control" style="width:120;"/>
                        </div>
                        <div class="pull-left" style ="margin-left:10px;">
                         <label for="6">6</label>
                         <input id="6" type="number" class="form-control" style="width:120;"/>
                        </div>
                   </div>

                </form>

                </div>
                
            </div>
        </div>
    </div>
</div>

Answer 2

此代码解决了我的问题

<link href="./bootstrap/css/bootstrap.css" rel="stylesheet">

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-primary">

                <div class="panel-heading">
                   <h4 class="text-center">TEXT</h4>
                </div>
            
                <div class="panel-body">

                <form>
                        
                <div class="form-inline">
                        <div class="form-group">
                          <label for="1">1</label> </br>      
                          <input id="1" type="number" class="form-control" style="width:80;"/> abc
                        </div>
                        <div class="form-group">
                          <label for="2">2</label></br>  
                          <input id="2" type="number" class="form-control" style="width:80;"/> abc
                        </div>
                        <div class="form-group">
                          <label for="3">3</label></br>  
                          <input id="3"type="number" class="form-control" style="width:80;"/> abc
                        </div>
                </div>
                </form>

                </div>
                
            </div>
        </div>
    </div>
</div>