Question

我使用引导类创建了一个表单。我不知道如何解决的唯一问题是如何调整表单上输入元素的宽度？我知道我可以使用内联样式或编写自定义css类，但是有一种方法可以使用仅仅引导类来调整两个输入的宽度吗？

我想将两个输入的宽度调整为与向上/向下箭头的按钮大致相同。基本上我想缩小两个输入。

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>





  <br/>
  
<div class="btn-group">
    <button type="button" class="btn btn-primary" >Nazaj</button>
</div>


  
  <div class="btn-group col-sm-offset-1">
  <button type="button" class="btn btn-primary "><span class="glyphicon glyphicon-arrow-up"></span></button>
</div>

  
<div class="btn-group">
   <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-down"></span></button>
</div>

  
  <div class="btn-group">
<input type="text" class="form-control" />
</div>



<div class="btn-group">
<h1>/</h1>
</div>



<div class="btn-group">
<input type="text" class="form-control" />
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-up"></span></button>
</div>

  
<div class="btn-group">
   <button type="button" class="btn btn-primary" ><span class="glyphicon glyphicon-arrow-down" ></span></button>
</div>
 
<div class="btn-group col-sm-offset-1">
<button type="button" class="btn btn-success">Shrani</button>
</div>

＆＃13;

Answer 1

您可以使用像

这样的引导网格

<div class="btn-group">
<input type="text" class="form-control col-md-2" />
</div>

阅读本教程https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

使用bootstrap类调整输入宽度

1 个答案: