Question

我正在努力改变表单控件的宽度，问题是我最终会将一些元素滑向一边。我希望有这样的布局：

label //occupies the entire line
short input //occupies the entire line

label //occupies the entire line
short input //occupies the entire line

这是使用

时的防范行为

<div class='form-group>
<label class="control-label">some text</label>
 <input class="form-control">
</div>
<div class='form-group>
<label class="control-label">some text</label>
<input class="form-control">
 </div>

问题是当我尝试以某种方式改变输入的宽度或选择

时

添加col-md-1引入了两个问题，它打破了文本标签（可预测因为col-md-1调整整个容器的大小）并使div内联，即使我将内部包装为另一个div它以某种方式脱离了div。

<div>
<div class='form-group col-md-1'>
<label class="control-label"></label>
<input class="form-control">
</div>

如果你能给出一些简单的结构例子，我会很高兴。

Answer 1

你应该创造一个小提琴，这样我们才能看出你的问题是什么。我重新创建了这个，在我的例子中没有发生任何事情，表格组仍保持全宽。

也许这就是你需要的

<div class=row>

    <div class=col-md-1>

        <div class='form-group'>
            <label class="control-label"></label>
            <input class="form-control">
        </div>

    </div>

</div>

你需要学习一些关于bootstrap 3以省去一些麻烦的事情是你不应该混合那些没有被混合的类。在文档中，他们非常清楚地说明了你应该一起使用哪些类，虽然有时看起来它们可能正在工作，但在大多数情况下，你最好只嵌套更多的元素。

Answer 2

就这样做 -

工作示例

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      
       <style type="text/css">
     
       </style>
       <script type="text/javascript">
        
       </script>
       </head>
       <body>
<div class="container">
<div class="row">           
<div class="col-md-1 col-xs-1">
  <div class="form-group">
  
              <label id="label">some text again</label>
              
              <input type="text" class="form-control" > 
              </div>  

   
<div class='form-group'>
   
<label>some text</label>

<input class="form-control">
</div>
 </div>
</div>
</div>
</body>
</html>

＆＃13;

如何更改输入的大小或选择而不转动表格＆＃34;水平＆＃34;在Bootstrap？

2 个答案: