Как сделать текстовое поле рядом с текстовой меткой

Question

Я использую тему Pixeladmin (http://wrapbootstrap.com/preview/WB07403R9)

Как вы можете видеть здесь, в этой картине:

Мой текстовое поле находится далеко от моего ярлык, и я хочу, чтобы он был ближе, поэтому мне интересно, как мне это сделать?

Вот мой код коробки:

<div class="row form-group"> 
         <label class="col-sm-2 control-label">Author:</label> 
         <div class="col-sm-10"> 
          <input type="text" name="author" id="author" placeholder="Author Name" class="form-control"> 
         </div> 
        </div> 

Примечание Вы можете просмотреть исходный код CSS на сайте предварительного просмотра, Я ценю помощь.

Answer 1

Вот пример с новым CSS3 функции: метод известково.

Преимущество абсолютной ширины этикетки. Вход будет занимать остальную часть заданного пространства. HTML:

<div class="form-group"> 
    <label class="control-label pull-left">Author:</label> 
    <input type="text" name="author" id="author" placeholder="Author Name" class="form-control pull-left"> 
</div> 

CSS:

label { 
    width: 100px; 
    padding: 7px; 
} 

#author { 
    width: calc(100% - 100px); 
    min-width: 200px; 
} 

http://jsfiddle.net/qakxpe35/

Answer 2

Поскольку вы используете столбцы начальной загрузки и, возможно, хотите сохранить столбцы в такте, я бы предложил 1 из 2 способов: сделать левую колонку шириной 1 или текст выровнять текст левых столбцов вправо, как показано ниже.

, если вы не хотите использовать столбцы для этого вы можете сделать следующее

.labelLeft { 
    display: inline-block; 
    width: 65px; 
    float:left; 
} 
.divLeft { 
    display: inline-block; 
    float:left; 
    width: calc(100% - 65px); 
} 

<div class="form-group"> 
    <label class="control-label labelLeft">Author:</label> 
    <div class="divLeft"> 
     <input type="text" name="author" id="author" placeholder="Author Name" class="form-control"/> 
    </div> 
</div> 

.labelLeft { 
 
    display: inline-block; 
 
    width: 65px; 
 
    float:left; 
 
} 
 
.divLeft { 
 
    display: inline-block; 
 
    float:left; 
 
    width: calc(100% - 65px); 
 
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row form-group"> <!-- original --> 
 
    <label class="col-sm-2 control-label">Author:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" name="author" id="author" placeholder="Author Name" class="form-control"/> 
 
    </div> 
 
</div> 
 
<br/><br/> 
 
<div class="row form-group"> <!-- bootstrap column size 1 --> 
 
    <label class="col-sm-1 control-label">Author:</label> 
 
    <div class="col-sm-11"> 
 
     <input type="text" name="author" id="author" placeholder="Author Name" class="form-control"/> 
 
    </div> 
 
</div> 
 
<br/> 
 
<br/> 
 
<div class="row form-group"> <!-- aligning text to the right --> 
 
    <label class="col-sm-2 control-label text-right">Author:</label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" name="author" id="author" placeholder="Author Name" class="form-control"/> 
 
    </div> 
 
</div> 
 
<br/><br/> 
 
<div class="form-group"> <!-- not using bootstrap grid, fixing width of the label --> 
 
    <label class="control-label labelLeft">Author:</label> 
 
    <div class="divLeft"> 
 
     <input type="text" name="author" id="author" placeholder="Author Name" class="form-control"/> 
 
    </div> 
 
</div>