Bootstrap form fields don't stay in containing div
angularjs, css, html, twitter-bootstrap
Solution
Try removing the `<div class="row">` tags wrapped around your `<div class="form-group">` tags. Both classes have negative left and right margins, which are being combined by the nested tags.
Problem
I'd like to make a bootstrap form that looks good on web and mobile. It seems like the straightforward markup doesn't work well. It's an angular app, but I don't think angular figures in... One problem is if I try to contain several fields by a div in order to apply a background color, the fields aren't contained, spilling off the left side of the div. Another problem, related I think, is that the fields appear on mobile with 0px left and right margins, which doesn't look too good. Here's the markup: in index .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> ``` That angular view directive causes the form to be included as follows... ``` <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> ``` And here's the bad result: see how fields spill off to the left? On Web.... About what it looks like on mobile...