Question

我想制作一个在网络和移动设备上看起来不错的引导程序表单。似乎直截了当的标记效果不佳。它是一个有角度的应用程序，但我不会想到......中的角色数字。

一个问题是，如果我尝试按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>

这是一个糟糕的结果：看看哪些字段溢出到左边？

在网上......

enter image description here

关于移动设备的外观...

enter image description here

Answer 1

尝试删除<div class="row">标记周围的<div class="form-group">标记。这两个类都有负的左右边距，它们由嵌套标签组合。

Answer 2

Example here

添加

<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>

Answer 3

将您的代码与正确的bootstrap文档代码进行比较

http://getbootstrap.com/css/#forms

Bootstrap表单字段不会保留在包含div中

3 个答案: