为什么这些单选按钮不正确对齐时显示小屏幕

Question

我bootstrap.Radio按键大屏幕上添加无线输入字段&标签显示效果细腻。但如果屏幕尺寸得到减少然后单选按钮离开屏幕。 下面请检查图像给出：

请建议我有关使正确对齐了。 这里是源代码：

function updateBill(type) { 
 
    var id = "bill"; 
 
    document.getElementById(id).value = document.getElementById(type).value; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<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" /> 
 
<div class="container"> 
 
    <div class="panel-group"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading"></div> 
 
     <div class="panel-body"> 
 
     <form class="form-horizontal"> 
 
      <div class="form-group"> 
 
      <label class="control-label col-sm-3" for="employeeid">ID:</label> 
 
      <div class="col-sm-8"> 
 
       <div class="input-group"> 
 
       <span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span> 
 
       <input type="text" class="form-control" id="employeeid" placeholder="Enter ID"> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="form-group form-inline row"> 
 
      <label class="control-label col-sm-3" style="text-align:right;">Quantity:</label> 
 
      <div class="input-group"> 
 
       <div class="radio "> 
 
       <input class="radio-inline" type="radio" name="radio2" id="radio0" value="0" onchange="updateBill('radio0')" checked> 
 
       <label class="radio-inline">None</label> 
 
       <input class="radio-inline" type="radio" name="radio2" id="radio1" value="200" onchange="updateBill('radio1')"> 
 
       <label class="radio-inline">One</label> 
 
       <input class="radio-inline" type="radio" name="radio2" id="radio2" value="300" onchange="updateBill('radio2')"> 
 
       <label class="radio-inline">Two</label> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="control-label col-sm-3" style="text-align:right;">Bill:</label> 
 
      <div class="col-sm-8"> 
 
       <div class="input-group"> 
 
       <span class="input-group-addon"><i class="glyphicon glyphicon-usd" aria-hidden="true"></i></span> 
 
       <input type="text" class="form-control" value="" id="bill" placeholder=".00"> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

请让我知道是否需要任何进一步的信息。 谢谢:)

Answer 1

你的HTML结构需要为您的使用多种类型的表单类的，使用输入和标签radio-inline，应该有一个像你输入的其余列中的无线电进行调整。请参阅Docs。

查看工作示例代码段。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="panel-group"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading"></div> 
 
     <div class="panel-body"> 
 
     <form class="form-horizontal"> 
 
      <div class="form-group"> 
 
      <label class="control-label col-sm-3" for="employeeid">ID:</label> 
 
      <div class="col-sm-9"> 
 
       <div class="input-group"> 
 
       <span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span> 
 
       <input type="text" class="form-control" id="employeeid" placeholder="Enter ID"> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="control-label col-sm-3">Quantity:</label> 
 
      <div class="col-sm-9"> 
 
       <label class="radio-inline"> 
 
       <input type="radio" name="radio2" id="radio0" value="0" onchange="updateBill('radio0')" checked>None 
 
       </label> 
 
       <label class="radio-inline"> 
 
       <input type="radio" name="radio2" id="radio1" value="200" onchange="updateBill('radio1')">One 
 
       </label> 
 
       <label class="radio-inline"> 
 
       <input type="radio" name="radio2" id="radio2" value="300" onchange="updateBill('radio2')">Two 
 
       </label> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="control-label col-sm-3" style="text-align:right;">Bill:</label> 
 
      <div class="col-sm-9"> 
 
       <div class="input-group"> 
 
       <span class="input-group-addon"><i class="glyphicon glyphicon-usd" aria-hidden="true"></i></span> 
 
       <input type="text" class="form-control" value="" id="bill" placeholder=".00"> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

父DIVradio你使用会造成这个问题。

我将名称更改为radio-group，并增加了一个margin-left它像这样：

.radio-group { 
    margin-left: 20px; 
} 

Here is the JSFiddle demo

与类名radio是造成问题，因为它是在引导现有的类元素和因此正在应用一些将单选按钮从网格移开的CSS。

Answer 3

我希望这会解决您的问题。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Radio Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</head> 
<body> 

    <form role="form"> 
    <div class="radio"> 
     <label><input type="radio" name="optradio">Option 1</label> 
    </div> 
    <div class="radio"> 
     <label><input type="radio" name="optradio">Option 2</label> 
    </div> 
    <div class="radio"> 
     <label><input type="radio" name="optradio">Option 3</label> 
    </div> 
    </form> 
</body> 
</html> 

Answer 4

<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" /> 
<div class="container"> 
    <div class="panel-group"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading"></div> 
     <div class="panel-body"> 
     <form class="form-horizontal"> 
      <div class="form-group"> 
      <label class="control-label col-sm-3" for="employeeid">ID:</label> 
      <div class="col-sm-8"> 
       <div class="input-group"> 
       <span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span> 
       <input type="text" class="form-control" id="employeeid" placeholder="Enter ID"> 
       </div> 
      </div> 
      </div> 
<!--// ************   MODIFIED SECTION **************** //--> 
      <div class="form-group"> 
      <label class="control-label col-sm-3" for="employeeid">Quantity:</label> 
      <div class="col-sm-8"> 
       <div class="radio"> 
       <label> 
       <input type="radio" name="radio2" id="radio0" value="0" onchange="updateBill('radio0')" checked> 
       None 
       </label> 

       <label> 
       <input type="radio" name="radio2" id="radio1" value="200" onchange="updateBill('radio1')"> 
       One 
       </label> 
       <label> 
       <input type="radio" name="radio2" id="radio2" value="300" onchange="updateBill('radio2')"> 
       Two 
       </label> 
      </div> 


      </div> 
      </div> 
<!--// ************   MODIFIED SECTION ENDS**************** //--> 
      <div class="form-group"> 
      <label class="control-label col-sm-3" style="text-align:right;">Bill:</label> 
      <div class="col-sm-8"> 
       <div class="input-group"> 
       <span class="input-group-addon"><i class="glyphicon glyphicon-usd" aria-hidden="true"></i></span> 
       <input type="text" class="form-control" value="" id="bill" placeholder=".00"> 
       </div> 
      </div> 
      </div> 
     </form> 
     </div> 
    </div> 
    </div> 

您已经使用了 “数量” 部分不必要的风格。删除类class="radio-inline"，添加div与<div class="col-sm-8">，将使其工作。查看中的更新代码修改部分