Question

我正在使用Twitter bootstrap 3和CodeIgniter。在我的网站上，我有一个左侧的帖子列表和右侧的侧栏栏。在这个侧边栏中，我有一个带有输入字段和下拉列表的搜索框，另一个带有10个热门帖子列表的框，以及另一个带有类别列表的框。

我想在较小的屏幕设备中仅将侧边栏的搜索框移动到网站顶部。因为它是一个搜索框，我希望首先显示，然后在移动视图中显示帖子。

我在做这件事时遇到了麻烦。我已经成功对列进行了重新排序，但结果并不是整个列首先显示，我希望搜索框位于顶部。

有什么建议吗？ pull-left和pull-right对我不起作用，或者我无法使其正常工作。使用隐藏和显示值的类是更好的方法吗？

这是我的帖子视图模板

<div class="container">
    <div class="row">                 
        <div class="col-sm-8">
            <div id="content" class="content-page">
                <h2><?php echo $title; ?></h2>
                <?php echo $content; ?>                                         
            </div> <!-- // content -->
        </div><!-- // col-sm-8 -->

        <div class="col-lg-4">
           <?php $this->load->view('templates/posts_sidebar');?>
        </div><!-- // col-lg-4 -->
    </div><!-- // row -->
    <hr>
</div><!-- // container -->

补充工具栏搜索视图是：

                    <div class="well post_search">         
<?php $attributes = array('id' => 'search', 'role' => 'form', 'autocomplete' => 'off'); ?>
                        <?php echo form_open('posts/filter', $attributes); ?>  
                        <div class="form-group">
                            <h4><label for="title"><i class="fa fa-search"></i> <?php echo $text_posts_sidebar_search; ?></label></h4>
                            <div class="input-group">
                                <?php echo form_input('title', set_value('title', $this->input->get('title')), 'class="form-control" id="title" placeholder="'.$text_posts_sidebar_search_placeholder.'"'); ?>
                                <span class="input-group-btn">
                                    <?php echo bt_submit('', '<span class="fa fa-search"></span>', 'btn btn-default'); ?>
                                </span>
                            </div>                            
                        </div>
                        <div class="form-group">
                            <label for="parent_id"><i class="fa fa-folder-open-o"></i> <?php echo $text_posts_sidebar_search_in; ?></label>
<?php echo form_dropdown('parent_id', $dropdown_postcategories, $this->input->get('parent_id') ? $this->input->get('parent_id') : '', 'id="parent_id" class="form-control"'); ?>
                        </div>                        
                        <!-- // input-group -->                      
                        <?php echo form_close(); ?>                    
                    </div><!-- /well -->

Answer 1

好的，我整理了我的问题。以防这对其他人有用。

在我的模板中，我现在实际上有两个搜索表单。一个可见，一个隐藏。

根据屏幕分辨率，使用媒体查询我显示或隐藏我需要的内容。

如何将过滤器/搜索框从侧边栏移动到顶部引导程序

1 个答案: