Bootstrap侧栏

Question

如何将此处的内容文本放在红色框区域中。我几乎尝试过任何我能想到的方法，但没有任何效果。我甚至尝试将文本放在一行，然后将其类设置为“row pull-left”。这是我的代码：

 <!-- 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.在表单元素上使用正确的类 - 避免内联样式 - 您将获得良好的样式和间距。您缺少表单组，并且没有使用任何标签。您对列和额外行的嵌套不正确，并且在已经浮动的列上使用pull-left，但是当您在其上使用左拉时，它会在小视口上拧紧。

DEMO：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 -->

Answer 2

尝试这样的事情：http://www.bootply.com/b1kLe7rntz

除非你愿意经历bootstrap.css或LESS项目的每一寸，否则定制CSS是你最好的选择。