css - Bootstrap 侧边栏

Question

我将如何使 CONTENT HERE 文本进入红色框区域。我几乎尝试了所有我能想到的方法，但没有任何效果。我什至尝试将文本排成一行，然后将其类设置为“行向左拉”。这是我的代码:

 <!-- Page Content -->
    <div class="container-fluid">

        <div class="row">

            <div class="col-lg-12" style="padding:20px;">

            <!-- Search -->
            <div class="row">
            <div class="col-md-3 pull-left">
            <div class="well" id="search_area">
            <div class="input-group ">
            <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
            <form action="" method="GET">    
            <input type="text" id="search_query" name="query" class="form-control" value="<?=$search_query?>">
            </form>
            </div>
            </div>
            </div>
            </div>
            <!-- Search -->

            <!-- Sorting -->

            <div class="row">
            <div class="col-md-3 pull-left">
            <div class="well" id="sorting_area" style="overflow:auto;">
            <b class="sorting-title">Sorting</b>
            <hr class="hr-clear">
            <div class="col-md-6 pull-left">
            Category:
            <select class="form-control" style="height:30px;">
            <option value="php_scripts">PHP Scripts</option>    
            </select>
            </div>
            <div class="col-md-6 pull-left">
            Order by:
            <select class="form-control" style="height:30px;">
            <option value="php_scripts">PHP Scripts</option>
            <option value="php_scripts">Wordpress Plugins</option>
            <option value="php_scripts">Wordpress Plugins</option>
            </select>
            </div>
            </div>
            </div>
            </div>
            <!-- Sorting -->

            <div class="row pull-left">
                CONTENT HERE
            </div>

            </div> <!-- /.col-lg-11 -->

        </div>
        <!-- /.row -->

    </div>
    <!-- /.container -->

</body>

</html>

Answer 1

您的示例不是使用 Bootstrap 3 的列、嵌套和表单的正确方法。在表单元素上使用正确的类——避免内联样式——您将获得良好的样式和间距。您缺少 form-group 并且没有使用任何标签。您的列和额外行的嵌套不正确，并且在已经向左浮动的列上使用了 pull-left，但是当您在其上使用 pull-left 时，它在小的地方搞砸了视口(viewport)。

演示:http://jsbin.com/yokuz/1/

 <!-- Page Content -->
<div class="container-fluid">
   <div class="row">
      <!-- Search -->
      <div class="col-md-3">
         <div class="well" id="search_area">
            <div class="input-group ">
               <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
               <form action="" method="GET">    
                  <input type="text" id="search_query" name="query" class="form-control" value="<?=$search_query?>">
               </form>
            </div>
         </div>
         <!-- Search -->
         <div class="well" id="sorting_area">
            <b class="sorting-title">Sorting</b>
            <hr class="hr-clear">
            <div class="row">
               <div class="col-sm-6 col-md-12">
                  <div class="form-group">
                     <label>Category:</label>
                     <select class="form-control">
                        <option value="php_scripts">PHP Scripts</option>
                     </select>
                  </div>
               </div>
               <div class="col-sm-6 col-md-12">
                  <div class="form-group">
                     <label>Order by:</label>
                     <select class="form-control">
                        <option value="php_scripts">PHP Scripts</option>
                        <option value="php_scripts">Wordpress Plugins</option>
                        <option value="php_scripts">Wordpress Plugins</option>
                     </select>
                  </div>
               </div>
            </div>
         </div>
         <!-- Sorting -->
      </div>
      <div class="col-md-9">
         This is where I put content
      </div>
   </div>
   <!-- /.row -->
</div>
<!-- /.container-fluid -->