Bootstrap .form-horizontal not working

Я начинаю попробовать bootstrap. То, что я хочу достичь, - это иметь метки и вводить одну и ту же линию красивой и чистой.Bootstrap .form-horizontal not working

Любой может объяснить мне, почему в нижеследующих примерах метки все еще находятся над входом? Я делаю что-то неправильно?

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <meta application-name="Test-System"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- Bootstrap Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 

    <!-- Bootstrap Latest compiled and minified JavaScript --> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

    <!-- jQuery UI from Google CDN --> 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> 
    <title></title> 
</head> 
<body> 

    <form class="form-horizontal"> 
     <div class="control-group"> 
      <label for="input1" class="control-label">Label</label> 
      <div class="controls"> 
       <input id="input1" type="text"> 
      </div> 
     </div> 

     <div class="control-group"> 
      <label for="input2" class="control-label">Label</label> 
      <div class="controls"> 
       <input id="input2" type="text"> 
      </div> 
     </div> 
    </form> 

    <!-- jQuery from Google CDN --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <!-- jQuery UI from Google CDN --> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
</body> 
</html>

источник

2014-02-18 Stefanos Vakirtzis

<div class="controls"> 
       <label for="input1" class="control-label">Label</label> 
       <input id="input1" type="text"> 
</div>

Это то, что вы ищете?

EDIT Горизонтальная метка извне входного div.

<div class="control-group"> 
     <label for="input1" class="control-label col-sm-2">Label</label> 
     <div class="controls col-sm-10"> 
      <input id="input1" type="text"> 
     </div> 
    </div>

источник

2014-02-18 19:21:50 Chris

Ну на самом деле вот что я искал большое спасибо. Но чтобы не казаться таким глупым, я делал что-то неправильно выше? Потому что я видел, что многие ppl используют метки вне элементов управления div и по-прежнему имеют один эффект линии. –

@StefanosVakirtzis Кажется, что горизонтальный дисплей сделан с 'col-sm-2' и' col-sm-10' – Chris

Спасибо, человек, ваша помощь очень ценится. :) –

-2

Попробуйте этот драгоценный камень. Он работал с легкостью для меня.

камень «simple_form_bootstrap3»

Нужно заменить form_for с «horizontal_form_for»

источник

2014-11-17 14:25:21

Bootstrap .form-horizontal not working

ответ

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