Question

我正在设计一个包含表单的响应式网页。但是所有输入元素都从左和右脱离形式。谁能告诉我，这是什么原因？？

我的演示代码...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Temp Pages for Testing </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/bootstrap.css">        
    <style>
        .custFrmOnlyBkCol { background-color: lightgray;    }
    </style>
</head>

<body>
    <div class="jumbotron">
        <div class="col-md-12">
            <form action="#" class="custFrmOnlyBkCol">
                <!--        In Css :  .custFrmOnlyBkCol { background-color: lightgray;    }     -->
                <div class="form-group row">
                    <label class="col-3 text-right">Id</label>
                    <div>
                        <p>101</p>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-3 text-right" for="">First Name</label>
                    <input type="text" class="form-control col-md-9">
                </div>
                <div class="form-group row">
                    <label class="col-3 text-right" for="">Last Name</label>
                    <input type="text" class="form-control col-md-9">
                </div>
                <input class="form-control offset-md-3 col-md-6 btn btn-primary" type="submit" value="Submit">
            </form>
        </div>
    </div>
</body>

</html>

Answer 1

设置输入的宽度

input {
width: x%;
}
</style>

Answer 2

您应该将输入标签放在具有以下行类的div中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Temp Pages for Testing </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/bootstrap.css">        
    <style>
        .custFrmOnlyBkCol { background-color: lightgray;    }
    </style>

</head>

<body>
    <div class="jumbotron">
        <div class="col-md-12">
            <form action="#" class="custFrmOnlyBkCol">
                <!--        In Css :  .custFrmOnlyBkCol { background-color: lightgray;    }     -->

               <div class="row col-md-10">

                    <label for="" class="col-md-3 text-right">First Name</label>
                    <input type="text" class="form-control col-md-9">

               </div>
               <div class="row col-md-10">

                    <label for="" class="col-md-3 text-right">Last Name</label>
                    <input type="text" class="form-control col-md-9">

               </div>

                <input class="form-control offset-md-3 col-md-6 btn btn-primary" type="submit" value="Submit">
            </form>
        </div>
    </div>
</body>

</html>

输入字段太宽

2 个答案: