Bootstrap表单字段不会保留在包含div中
goo*_*son 2 html css twitter-bootstrap angularjs
我想制作一个在网络和移动设备上看起来不错的引导表单.似乎直截了当的标记效果不佳.这是一个有角度的应用程序,但我不认为...
一个问题是,如果我尝试通过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>
该角度视图指令导致表单包含如下...
<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>
这是糟糕的结果:看看哪些字段溢出到左边？
在网上....
关于它在移动设备上的样子......
| 归档时间： |
|
| 查看次数： |
4853 次 |
| 最近记录： |