主页 / 问题 / 607268
Accepted
Byulent
Asked:2020-12-24 12:37:44 +0000 UTC2020-12-24 12:37:44 +0000 UTC

我怎样才能让右栏弹出？

  • 772

我正在引导程序上建立一个网站。有必要确保右栏中大屏幕上显示的信息在内容部分的顶部显示在移动设备上。但是，默认情况下，右列会下降。如何布局页面以使右栏上升？

HTML 代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<main>
    <div class="container">
        <div class="row">
            <div class="col-sm-9">
                <div class="content">
                    <div class="info">
                        <h2>Информация</h2>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed massa sollicitudin, accumsan
                        diam et, luctus elit. Praesent odio est, faucibus a est at, dictum facilisis mi. Vestibulum a
                        libero odio. Sed nec ullamcorper nulla, ac lobortis odio. Donec egestas vel risus ac gravida.
                        Curabitur consectetur lobortis auctor. Fusce cursus semper lorem, ac auctor nunc fermentum sit
                        amet. Pellentesque nec lacus in magna consectetur viverra. Proin quis turpis laoreet, aliquam
                        est ac, lacinia nibh. Aliquam erat volutpat. Curabitur placerat consectetur maximus.
                        Mauris accumsan leo non lacus vehicula efficitur.
                    </div>
                    <div class="galerry">
                        <h2>Фотогалерея</h2>
                        Место для фотогалереи
                    </div>
                    <div class="news">
                        <h2>Новости</h2>
                        Место для новостей
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="search">
                    <h4>Поиск</h4>
                    <div class="input-group">
                        <input class="form-control" type="text">
                        <span class="input-group-btn">
                            <button class="btn btn-default"><span class="glyphicon glyphicon-search"></span> </button>
                        </span>
                    </div>
                </div>
                <div class="newspaper">
                    <h3>Газета</h3>
                    <div class="last">Содержимое блока</div>
                </div>
                <div class="contacts">
                    <h3>Контакты</h3>
                    <div class="contact">
                        <h5 class="small">jjj</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

html

1 个回答

  1. Best Answer

    Bootstrap 可以交换列： http: //getbootstrap.com/css/#grid-column-ordering

    它们需要像在移动设备上一样定位，并且在切换到宽屏时，将顶部的列向右推，并将底部的列向左拉。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<main>
    <div class="container">
        <div class="row">
            <div class="col-sm-3 col-sm-push-9">
                <div class="search">
                    <h4>Поиск</h4>
                    <div class="input-group">
                        <input class="form-control" type="text">
                        <span class="input-group-btn">
                            <button class="btn btn-default"><span class="glyphicon glyphicon-search"></span> </button>
                        </span>
                    </div>
                </div>
                <div class="newspaper">
                    <h3>Газета</h3>
                    <div class="last">Содержимое блока</div>
                </div>
                <div class="contacts">
                    <h3>Контакты</h3>
                    <div class="contact">
                        <h5 class="small">jjj</h5>
                    </div>
                </div>
            </div>
            <div class="col-sm-9 col-sm-pull-3">
                <div class="content">
                    <div class="info">
                        <h2>Информация</h2>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed massa sollicitudin, accumsan
                        diam et, luctus elit. Praesent odio est, faucibus a est at, dictum facilisis mi. Vestibulum a
                        libero odio. Sed nec ullamcorper nulla, ac lobortis odio. Donec egestas vel risus ac gravida.
                        Curabitur consectetur lobortis auctor. Fusce cursus semper lorem, ac auctor nunc fermentum sit
                        amet. Pellentesque nec lacus in magna consectetur viverra. Proin quis turpis laoreet, aliquam
                        est ac, lacinia nibh. Aliquam erat volutpat. Curabitur placerat consectetur maximus.
                        Mauris accumsan leo non lacus vehicula efficitur.
                    </div>
                    <div class="galerry">
                        <h2>Фотогалерея</h2>
                        Место для фотогалереи
                    </div>
                    <div class="news">
                        <h2>Новости</h2>
                        Место для новостей
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

    • 7

相关问题