как уменьшить ширину типа ввода в bootstrap

Я написал код для формы, но хочу уменьшить ширину без ущерба для макета, и я не могу изменить ширину полей ввода.как уменьшить ширину типа ввода в bootstrap

при уменьшении размера этикетки получают откалибрована

<head> 
    <title>Add Customer</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <div class="jumbotron"> 
     <div class="container" style="color:green"> 
     <h2 align="center" style="color: blue">Add Customer</h2> 
     <form role="form"> 
      <div class="form-group"> 
       <label for="CustomerName">Name:</label> 
       <!--<input type="text" class="form-control" id="email" placeholder="Enter Customer Name" width ="511px">--> 
       <input type="text" class="form-control" id="email" placeholder="Enter Customer Name" width ="511px">  
      </div> 
      <div class="form-group"> 
       <label for="email">Email:</label> 
       <a href="#"><span class="glyphicon glyphicon-envelope"></span></a> 
       <input type="email" class="form-control" id="email" placeholder="Enter email"> 
      </div> 
      <div class="form-group"> 
       <label for="pwd">Company:</label> 
       <input type="text" class="form-control" id="pwd" placeholder="Enter Company Name"> 
      </div> 
      <div class="form-group"> 
       <label for="pwd">Comment:</label> 
       <textarea class="form-control" rows="5" id="comment" placeholder="Enter Comments"></textarea> 
      </div> 
      <button type="submit" class="btn btn-success">Submit</button> 
     </form> 
     </div> 
    </div> 
</body>

источник

2015-12-07 krishna mohan

попытаться добавить ширину с дисплеем: блок; свойство –

, если вы хотите указать пользовательскую ширину для ввода полей, тогда удалите класс управления формой и дайте пользовательский css. см. здесь http://jsfiddle.net/Leo_the_lion/Lqsrw039/1/ или см. это http://jsfiddle.net/Leo_the_lion/Lqsrw039/2/ –

@Leothelion Я обычно добавляю свойства в класс управления формой (в styles.css или аналогичный), а не полностью удалить класс, таким образом, вы не потеряете другие вещи, которые могут понадобиться как часть CSS-формы. Любые стили, которые вы применяете, будут переписывать те, которые находятся в стандартном CSS Bootstrap, если у вас есть файлы в правильном порядке загрузки – Lyall

В вашем данном примере вы использовали неправильные правила CSS, как вы использовали width="511px", не corrcet. Вы должны использовать style="width:511px;". вы можете использовать встроенный css, чтобы указать свой собственный стиль для ввода полей. см. here

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

вот так <input type="text" class="form-control" style="width:170px;" id="pwd" placeholder="Enter Company Name"> вы можете переопределить класс начальной загрузки.

ОБНОВЛЕНО Я добавил пользовательский ширину поля ввода и в текстовой области вы можете только изменить размер по вертикали. (Для теста)

источник

2015-12-07 13:32:16

ok thats correct..but пользовательский стиль не ищет ... для полей компании и комментариев .. –

хорошо, я вижу, что они имеют меньшую ширину. Я просто дал им обычную ширину. –

im не упомянув относительно нет ширина. im говорит, что границы текстового поля выглядят не так, как указано выше. –

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

<div class="col-md-6"> 
    <div class="form-group"> 
     <label for="CustomerName">Name:</label> 
     <input type="text" class="form-control" id="email" placeholder="Enter Customer Name">  
    </div> 
</div>

источник

2015-12-07 14:31:11 vistajess

как уменьшить ширину типа ввода в bootstrap

ответ

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