Question

我这里有一个页面来说明我的问题。

http://www.ttmt.org.uk/bootstrap-form/

这是一个简单的2列布局，右侧列中有一个表单

表格也在2栏中。

我希望表单列与其所在列的一半相同。

因此，输入的名称将是右列的一半，电子邮件输入将是剩余的一半。

如何使用bootstrap对此进行编码。

        <!DOCTYPE html>
        <html lang="en">

            <head>  
                <meta charset="UTF-8">
                <meta name="description" content="">
                <meta name="keywords" content="">
                <meta name="robots" content="">
                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

                <!--jQuery-->
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

                <!--css-->
                <link rel="stylesheet" href="css/bootstrap.css">

                <style>

                    .box{
                        height: 500px;
                    }

                    .left{
                        background: #aaa;
                    }

                    .right{
                        background: #ccc;
                        padding: 50px 0 0 0;
                    }

                </style>


                <!--[if lt IE 9]>
                    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
                <![endif]-->

                <title>Title of the document</title>
            </head>

        <body>

            <div class="wrap">

                <div class="container">

                    <div class="row">

                        <div class="col-sm-6 left box">

                        </div>


                        <div class="col-sm-6 right box">

                            <form class="form-inline" role="form">

                                <div class="form-group">

                                    <input type="text" placeholder="name" class="form-control">

                                    <input type="text" placeholder="email" class="form-control">

                                </div>

                                <div class="form-group">

                                    <input type="text" placeholder="phone number" class="form-control">

                                    <input type="text" placeholder="company" class="form-control">

                                </div>


                            </form> 


                        </div>

                    </div>
                </div>

            </div>

        </body>

        </html>

Answer 1

添加此CSS

<style type="text/css">
.form-inline .form-control
{
    width: 100%;
}
    </style>

并更改一些课程

<div class="row col-sm-12">
        <div class="col-sm-6 left box"></div>

        <div class="col-sm-6 right box">
            <form class="form-inline col-sm-12">
                <div class="form-group col-sm-6">
                    <input class="form-control col-sm-6" placeholder="name"
                    type="text">
                </div>

                <div class="form-group col-sm-6">
                    <input class="form-control col-sm-6" placeholder="email"
                    type="text">
                </div>

                <div class="form-group col-sm-6">
                    <input class="form-control col-sm-6" placeholder=
                    "phone number" type="text">
                </div>

                <div class="form-group col-sm-6">
                    <input class="form-control col-sm-6" placeholder="company"
                    type="text">
                </div>
            </form>
        </div>
    </div>

让我知道它是否有效

快乐编码!!!

enter image description here

Bootstrap内联表单

1 个答案: