Wie richten Sie die form, die horizontal in der Mitte des div in der bootstrap

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <form role="form">
                <div class="form-group">
                     <label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
                </div>
                <div class="form-group">
                     <label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
                </div>
                <div class="form-group">
                     <label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
                    <p class="help-block">
                        Example block-level help text here.
                    </p>
                </div>
                <div class="checkbox">
                     <label><input type="checkbox" /> Check me out</label>
                </div> <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>
</div>

Ich bin mit bootstrap.

Und ich will richten das Formular in der Mitte dieses div col-md-12 column.

Irgendwelche Lösungen für?

Horizontal oder Vertikal?
Horizontal....

InformationsquelleAutor user3155047 | 2014-01-02

4

Können Sie zwei Lösungen haben hier mit der Eigenschaft display.
- Eins mit inline-block:
```
.col-md-12 column {  
   text-align:center;
}
.col-md-12 column form {
   display:inline-block;
}
```
- Zwei mit table :
```
.col-md-12 column form {
   display:table;
   margin:auto;
}
```
Wenn Sie eine Feste width für das Formular müssen Sie nur fügen Sie die margin:auto

InformationsquelleAutor DaniP

Demo http://bootply.com/103569

Könnten einen offset wie:

<div class="container">
<div class="row clearfix">
    <div class="col-md-6 col-md-offset-3 column">
        <form role="form">
            <div class="form-group">
                 <label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
            </div>
            <div class="form-group">
                 <label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
            </div>
            <div class="form-group">
                 <label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
                <p class="help-block">
                    Example block-level help text here.
                </p>
            </div>
            <div class="checkbox">
                 <label><input type="checkbox" /> Check me out</label>
            </div> <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
</div>
<div class="row clearfix">
    <div class="col-md-12 column">
    </div>
</div>
</div>

oder

<div class="container">
<div class="row clearfix">
    <div class="col-md-12 column">
    <div class="col-md-6 col-md-offset-3 column">
        <form role="form">
            <div class="form-group">
                 <label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
            </div>
            <div class="form-group">
                 <label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
            </div>
            <div class="form-group">
                 <label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
                <p class="help-block">
                    Example block-level help text here.
                </p>
            </div>
            <div class="checkbox">
                 <label><input type="checkbox" /> Check me out</label>
            </div> <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
    </div>
</div>
</div>

http://getbootstrap.com/css/#grid-offsetting

InformationsquelleAutor Purple Hexagon

1

Geben Sie Ihrem Formular eine Klasse
```
<form role="form" class="myForm">
```
und fügen Sie den folgenden Stil, um ihn
```
.myForm
{
    width: 480px;
    margin-left: auto;
    margin-right: auto;
}
```
http://bootply.com/103575

InformationsquelleAutor Ahm3d Said
0

Ich würde versuchen, indem
```
class="center"
```
zu
```
<form role="form">
```
Ende mit
```
<form role="form" class="center">
```
sowie das erstellen der style-Deklaration:
```
.center{margin:0px auto;}
```
wenn man bedenkt, dass .center muß eine Feste Breite, die kleiner ist als die Breite der container.

Hoffe, das hilft.

InformationsquelleAutor jamesJosephFinn

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.