Question

我正在尝试将一个表单放在页面的中心，但每次我将col放在中心时，内容都会被推到该col的左侧。我希望表单是col-md-6的整个宽度，并且col位于页面中间。

<div class="col-md-6 col-md-offset-3">
    <div class="row">
        <div class="col-md-2">Your Name:</div>
        <div class="col-md-4">
            <input type="text" name="uname" class="form-control" required="" placeholder="Your Name">
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">Your Email:</div>
        <div class="col-md-4">
            <input type="email" name="email" class="form-control" required="" placeholder="Email Address">
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">Your Company:</div>
        <div class="col-md-4">
            <input type="text" name="company" class="form-control" required="" placeholder="Company Name">
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">Your Contact:</div>
        <div class="col-md-4">
            <input type="email" name="contactemail" class="form-control" required="" placeholder="Email Address">
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">Choose file(s):</div>
        <div class="col-md-4">
            <input name="files" type="file" id="files" multiple="multiple" class="form-control" required="">
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
             <h5></h5>

        </div>
        <div class="col-md-4">
            <input id="sbmtBtn" type="submit" name="submit" value="Upload" class="btn btn-primary btn-lg btn-block">
        </div>
    </div>

http://www.bootply.com/OiRABZIff0

Answer 1

更改您的

<div class="col-md-6 col-md-offset-3">

到

<div class="col-md-7 col-md-offset-4">

Answer 2

在col-md-offset-3之前添加col-md-2。

Have a look at the bootply here

同样不应该在行中定义col，行应该封装在container中，所以我也修改了html结构。

Answer 3

我已经编辑过。看看这个帮助你。 http://www.bootply.com/QnYcyyIh2V

Bootstrap Col中的中心内容

3 个答案: