Bootstrap 调整输入和文本的大小（输入右侧）

Question

我在缩放问题上卡住了一段时间...

当我调整 window（移动）的大小时，即使宽度为 80%，“%”也会低于输入，我想知道他为什么不保持在右边...

<html>


 <head>
     <!--<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <head>
     
     <body>
   <div class="col-md-6">
                <div class="row form-inline text-center">
                        <div class="form-group col-md-3 form-inline text-center">
                          <label for="a">A</label></br>      
                          <input id="a" name="a" type="number" class="form-control" style="width:80%;"/><b>%</b>
                        </div>
                        <div class="form-group col-md-3">
                          <label for="b">B</label></br>  
                          <input id="b" name="b" type="number" class="form-control" style="width:80%"/> <b>%</b>
                        </div>
                        <div class="form-group col-md-3">
                          <label for="c">C</label></br>  
                          <input id="c" name="c" type="number" class="form-control" style="width:80%"/> <b>%</b>
                        </div>

                        <div class="form-group col-md-3">
                          <label for="c">D</label> </br>      
                          <input id="c" name="c" type="number" class="form-control" style="width:80%"/> <b>%</b>
                        </div>
                </div>
            </div>
        <body>
</html>

如果有人知道出了什么问题...

Answer 1

“%”在小屏幕上占据了超过 20% 的宽度。一个不错的解决方案是使用 bootstrap 中可用的输入插件：http://getbootstrap.com/components/#input-groups-basic

Bootstrap 调整输入和文本的大小（输入右侧）

Bootstrap resizing input & text(right of input)

css

window-resize

twitter-bootstrap