How to hide fixed div in mobile?

Asked

Viewed 251 times

1

I need to leave a responsive page, in it I have a filter that is fixed and I want to hide the filter in a button when the screen is less than 750px 

<div class="col-lg-3 col-md-6"> <!-- comeco do filtro --> 
                    <div class="card position-fixed">
                        <div class="card-body">
                            <h6 class="card-subtitle">Preço</h6>
                            <div id="range_03"></div>
                            <div>
                                <br>
                                <div class="btn-group" data-toggle="buttons">
                                        <label class="btn btn-primary">
                                            <input type="radio" name="options" id="option1" autocomplete="on" checked> Vinho
                                        </label>
                                        <label class="btn btn-primary active ">
                                            <input type="radio" name="options" id="option2" autocomplete="off"> Agua
                                        </label>
                                </div>
                            </div><br><hr><br>

                            <!-- Outros Filtros-->
                            <div class="form-group ">
                                <h6 class="card-subtitle">Tipo</h6>
                                <select class="form-control custom-select">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Pessoas</h6>
                                <input type="text" class="form-control form-control-line" >
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Quartos</h6>
                                <select class="form-control custom-select">
                                    <option>03</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Palavra chave</h6>
                                <input type="text" class="form-control form-control-line" >
                            </div>
                        </div>
                    </div>               
                </div> <!--FIM DO FILTRO -->

Below the filter there is a type of showcase

twitter-bootstrap

  • can use the bootstrap Hidden-Xs class

  • or media queries in css =)

  • What version of Bootstrap 3 or 4?

  • Gabrielle if you have any doubts or can’t resolve any bug comments under my answer that I help you ok

2 answers

2


I’ll give you a solution, but you have to test in your project because it’s really something I did the first time and I don’t know how the behavior will be there. But basically I used the structure of Navbar to put your filter inside :D

inserir a descrição da imagem aqui

Follow the code I used to get the image result above.

@media only screen and (min-width:768px) {
    #navbarsExample04 {
        display: block !important;
    }
}
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>



    <div class="row">
        <div class="col-3">
            <nav class="navbar navbar-expand-md navbar-light ">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04"
                    aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarsExample04">


                    <div class="card position-fixed">
                        <div class="card-body">
                            <h6 class="card-subtitle">Preço</h6>
                            <div id="range_03"></div>
                            <div>
                                <br>
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-primary">
                                        <input type="radio" name="options" id="option1" autocomplete="on" checked>
                                        Vinho
                                    </label>
                                    <label class="btn btn-primary active ">
                                        <input type="radio" name="options" id="option2" autocomplete="off"> Agua
                                    </label>
                                </div>
                            </div><br>
                            <hr><br>

                            <!-- Outros Filtros-->
                            <div class="form-group ">
                                <h6 class="card-subtitle">Tipo</h6>
                                <select class="form-control custom-select">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Pessoas</h6>
                                <input type="text" class="form-control form-control-line">
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Quartos</h6>
                                <select class="form-control custom-select">
                                    <option>03</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Palavra chave</h6>
                                <input type="text" class="form-control form-control-line">
                            </div>
                        </div>
                    </div>
                </div>
                <!--FIM DO FILTRO -->

            </nav>
        </div>
    </div>

-1

@media only screen and (min-width:768px) {
    #navbarsExample04 {
        display: block !important;
    }
}
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>



    <div class="row">
        <div class="col-3">
            <nav class="navbar navbar-expand-md navbar-light ">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04"
                    aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarsExample04">


                    <div class="card position-fixed">
                        <div class="card-body">
                            <h6 class="card-subtitle">Preço</h6>
                            <div id="range_03"></div>
                            <div>
                                <br>
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-primary">
                                        <input type="radio" name="options" id="option1" autocomplete="on" checked>
                                        Vinho
                                    </label>
                                    <label class="btn btn-primary active ">
                                        <input type="radio" name="options" id="option2" autocomplete="off"> Agua
                                    </label>
                                </div>
                            </div><br>
                            <hr><br>

                            <!-- Outros Filtros-->
                            <div class="form-group ">
                                <h6 class="card-subtitle">Tipo</h6>
                                <select class="form-control custom-select">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Pessoas</h6>
                                <input type="text" class="form-control form-control-line">
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Quartos</h6>
                                <select class="form-control custom-select">
                                    <option>03</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <h6 class="card-subtitle">Palavra chave</h6>
                                <input type="text" class="form-control form-control-line">
                            </div>
                        </div>
                    </div>
                </div>
                <!--FIM DO FILTRO -->

            </nav>
        </div>
    </div>

It gave some bugs but I think I fix, thank you

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.