我想制作一个在网络和移动设备上看起来不错的 Bootstrap 表单。似乎简单的标记效果不佳。这是一个 Angular 应用程序，但我不认为 Angular 数字...
一个问题是，如果我尝试通过一个 div 包含多个字段以应用背景色，则这些字段不包含在内，溢出了 div 的左侧。
另一个我认为相关的问题是，这些字段出现在移动设备上时，左右边距为 0px，看起来不太好。
这是标记:
在索引 .html 中:
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>My BS App</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted">My BS App</h3>
</div>
<div class="row">
<div class="col-md-6">
<div ng-view></div>
该 Angular View 指令导致表单被包含如下...
<form class="form-horizontal" name="parentForm" role="form" novalidate mb-submit="save()">
<fieldset>
<div ng-repeat="parent in family.parents()">
<legend>{{parent.firstName}} {{parent.lastName}}</legend>
<div class="row">
<div class="form-group">
<div class="col-md-10">
<div class="checkbox">
<input type="checkbox" ng-checked="parent.list" ng-model="parent.list">List parent</input>
</div>
</div>
</div>
</div>
<div style="background-color:red;">Why don't I contain the following?
<div class="row">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="First name" name="firstName" class="form-control" ng-model="parent.firstName" required>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-10">
<input type="text" placeholder="Last name" name="lastName" class="form-control" ng-model="parent.lastName" required>
</div>
</div>
</div>
这是糟糕的结果:看到字段如何向左溢出了吗？
在网络上....
关于它在移动设备上的样子...
最佳答案
尝试删除 <div class="row">标签包裹着你的 <div class="form-group">标签。这两个类都有负的左右边距，它们由嵌套标签合并。
关于html - Bootstrap 表单字段不会停留在包含 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23296517/