我想制作一个在网络和移动设备上看起来不错的引导程序表单。似乎直截了当的标记效果不佳。它是一个有角度的应用程序,但我不会想到......中的角色数字。
一个问题是,如果我尝试按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>
这是一个糟糕的结果:看看哪些字段溢出到左边?
在网上......
关于移动设备的外观...
答案 0 :(得分:6)
尝试删除<div class="row">
标记周围的<div class="form-group">
标记。这两个类都有负的左右边距,它们由嵌套标签组合。
答案 1 :(得分:2)
添加
<div class="col-md-12">
之后
<div class="row">
包含div
。{/ p>的background-color:red;
中的
例如:
<div style="background-color:red;">Why don't I contain the following?
<div class="row">
<div class="col-md-12">
<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>
<div class="row">
<div class="col-md-12">
<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>
答案 2 :(得分:-1)
将您的代码与正确的bootstrap文档代码进行比较