центр div внутри колонка bootstrap

Я пытаюсь центрировать форму внутри столбца в бутстрапе. Возможно ли это потому, что я ищу больше часа и ничего не нашел. Я новичок в загрузчике ...центр div внутри колонка bootstrap

Мой код:

<div class="container-fluid"> 

    <!--Row with two equal columns--> 

    <div class="row"> 

     <div class="col-sm-8"> 

     <form class="form-inline row" role="form" action="index.php" method="post"> 

       <input class="form-control" type="text" name="kerkim" id="input_main" value=""> 

       <i id="slash">|</i> 

       <div class="input-group"> 

       <input id="address" class="form-control" type="text" > 
       <div class="input-group-btn"> 
       <button type="text" class="btn btn-warning"><i>Me gjej</i></button> 
       </div> 
       </div> 
        <button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i></button> 

      </form> 
     </div> 

     <div class="col-sm-2"><h3>Second left</h3></div> 
     <div class="col-sm-2"><h3>Second right</h3></div>

источник

2015-06-24 kg_root

Вы можете использовать значение смещения в форме col-md-offset-4

<form class="form-inline row col-md-offset-4" method="post" action="index.php" role="form">

Более подробно идти с LINK

источник

2015-06-24 12:33:34

добавить класс, чтобы сформировать "center_form"

<form class="form-inline row center_form" role="form" action="index.php" method="post">

и добавьте ниже CSS

.center_form{margin:0 auto;}

источник

2015-06-24 12:33:18

Вы должны удалить класс строки из элемента формы, так как она не содержит столбцов. Затем вам нужно использовать css для центра вашей формы. Попробуйте это:

HTML

<div class="container-fluid"> 

    <!--Row with two equal columns--> 

    <div class="row"> 

     <div class="col-sm-8"> 

     <form class="form-inline centered" role="form" action="index.php" method="post"> 

       <input class="form-control" type="text" name="kerkim" id="input_main" value=""> 

       <i id="slash">|</i> 

       <div class="input-group"> 

       <input id="address" class="form-control" type="text" > 
       <div class="input-group-btn"> 
       <button type="text" class="btn btn-warning"><i>Me gjej</i></button> 
       </div> 
       </div> 
        <button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i></button> 

      </form> 
     </div> 

     <div class="col-sm-2"><h3>Second left</h3></div> 
     <div class="col-sm-2"><h3>Second right</h3></div> 
    </div> 
</div>

CSS

.centered { 
    margin: auto; 
}

В качестве альтернативы, вы можете использовать этот HTML-макет для достижения центрированной формы:

<div class="container-fluid"> 

    <!--Row with two equal columns--> 

    <div class="row"> 

     <div class="col-sm-8"> 
     <div class="row"> 
     <form class="form-inline centered col-sm-8 col-sm-offset-2" role="form" action="index.php" method="post"> 

       <input class="form-control" type="text" name="kerkim" id="input_main" value=""> 

       <i id="slash">|</i> 

       <div class="input-group"> 

       <input id="address" class="form-control" type="text" > 
       <div class="input-group-btn"> 
       <button type="text" class="btn btn-warning"><i>Me gjej</i></button> 
       </div> 
       </div> 
        <button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i></button> 

      </form> 
     </div> 

     <div class="col-sm-2"><h3>Second left</h3></div> 
     <div class="col-sm-2"><h3>Second right</h3></div> 
     </div> 
    </div> 
</div>

источник

2015-06-24 12:40:13

центр div внутри колонка bootstrap

ответ

Смежные вопросы