Question

隐藏侧边栏时如何使文本输入拉伸？请查看jsFIDDLE

上的示例

HTML：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-10">
      <div class="jumbotron">
        <form role="form" method="post" class="form-inline">                    
          <div class="form-group">
            <label for="idf">Name: </label>
            <input type="text" class="form-control" id="idf" aria-describedby="h">
            <span id="h" class="help-block"></span>                             
          </div>            
          <div class="form-group" id="tt">
            <label for="ida">Tested:</label>
          </div>
          <div class="form-group" id="cc">
            <input type="checkbox" id="ida">    
          </div>
          <div class="form-group" id="bb">
            <button type="submit" class="btn btn-success"><i class="fa fa-check fa-lg"></i></button>
            <button type="button" class="btn btn-danger"><i class="fa fa-close fa-lg"></i></button>
          </div>
          <div style="clear: both">/div>
        </form> 
      </div>                            
    </div>
  </div>
</div>

的CSS：

.container-fluid .jumbotron {padding: 20px 0 10px 15px}
.btn {width: 40px; height: 28px; line-height:10px;}
#tt {margin-left: 20px; padding-top: 3px; height:38px;}
#cc {margin-left: 5px; height:38px}
#bb {margin-right: 20px; float:right}

当您隐藏侧边栏时，您会看到内容向左移动。有一个文本输入，我不知道如何使用jumbotron进行输入。我也希望能够设置最小宽度。

第二个问题：是否有更好的方法使所有元素内联和水平对齐？我必须将复选框与标签分开，然后按照您的意愿进行操作。

Answer 1

我在其他来源中找到了一些信息并将它们放在一起。它似乎工作正常。到目前为止，没有人能够回答我的问题（这不是那么简单），但如果有人知道更好的方式和更清洁的做法，我想学习如何做得更好。这就是我所做的：

HTML：

<div class="jumbotron">
  <form role="form" method="post" class="form-inline">          
    <div id="cell-1">
      <label for="idf">Name:</label>
    </div>
    <div class="form-group" id="cell-2">
      <input type="text" class="form-control" id="idf" aria-describedby="h" style="width:100%">
      <span id="h" class="help-block">Warning: this field can't be empty!</span>                                
    </div>      
    <div id="cell-3">
      <div class="form-group" id="tt">
        <label for="ida">Tested:</label>
      </div>
      <div class="form-group" id="cc">
        <input type="checkbox" id="ida">    
      </div>
      <div class="form-group" id="bb">
        <button type="submit" class="btn btn-success"><i class="fa fa-check fa-lg"></i></button>
        <button type="button" class="btn btn-danger"><i class="fa fa-close fa-lg"></i></button>
      </div>
      <div style="clear: both"></div>       
    </div>
  </form>   
</div>

css：

.container-fluid .jumbotron {padding: 20px 0 10px 15px}
#cell-1 {display: table-cell; vertical-align:top; padding-top:7px}
#cell-2 {display: table-cell; width:50%; padding-left:5px}
#cell-3 {display: table-cell; width:50%}
.btn {width: 40px; height: 28px; line-height:10px;}
#tt {margin-left: 20px; padding-top: 7px; height:38px;}
#cc {margin-left: 5px; padding-top: 4px; height:38px}
#bb {margin-right: 20px; padding-top: 4px; float:right}
.help-block {font-size: 12px;color:red}

jsFIDDLE上的更新示例。

bootstrap - 隐藏侧边栏时使输入拉伸

1 个答案: