Question

以下是该网站在桌面上的截图：

以下是移动设备（iPhone 6）版本的样子：

这是我此页面的代码：

<?php require_once('includes/header.php'); ?>

<div class='container'>
    <div class='panel panel-default col-xs-5'>
        <div class='panel-body'>
            <h3>Bem Vindo!</h3>
            <p> Just some text. </p>
        </div>
    </div>

    <div class='container panel panel-default col-xs-offset-1 col-xs-5'>
        <div class='panel-body'>
            <form action="handler.php" method="post">
                <div class='form-group'>
                    <label for='sel1'><h3>Escolha um ano abaixo:</h3></label>
                    <select class='form-control' id='sel1' name='anos'>
                        <!-- Função para gerar um dropdown com anos -->
                        <?php require_once('utils.php'); dropdownAnos(); ?>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">Ver relatórios</button>
            </form>
        </div>
    </div>
</div>

<?php require_once('includes/footer.php'); ?>

代码非常混乱（我只是从html，php，Bootstrap等开始）。所以，我想通过将一个放在另一个之上来使移动版本更好。（不要担心Navbar，我稍后会改变它。）

Answer 1

试试这个

<div class='container'>
    <div class='row'>

        <div class='col-xs-12 col-sm-12 col-md-6 col-lg-5 panel panel-default'>
            <div class='panel-body'>
                 <h3>Bem Vindo!</h3>
                 <p> Just some text. </p>
            </div>
        </div>

        <div class='col-xs-12 col-sm-12 col-md-6 col-lg-5 col-xs-offset-1 panel panel-default'> 
            <div class='panel-body'>
                <form action="handler.php" method="post">
                    <div class='form-group'>
                        <label for='sel1'><h3>Escolha um ano abaixo:</h3></label>
                        <select class='form-control' id='sel1' name='anos'>
                             <!-- Função para gerar um dropdown com anos -->
                             <?php require_once('utils.php'); dropdownAnos(); ?>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">Ver relatórios</button>
                 </form>
            </div>
        </div>

    </div>    
</div>

你可以通过col-xs（适用于xsmall设备），col-md（适用于中型设备），col-lg（大型设备）实现您想要的效果......

cols 也应嵌套在行中，行嵌套在容器中。

Answer 2

您必须了解的是grid system如何在Boostrap中运作。

基本上col-xs-5单独表示屏幕宽度为5 out 12 col。

所以您必须做的是将此col-xs-5更改为col-xs-12（这意味着全宽）和 col-md-5或col-lg-5（这意味着在小屏幕上拿12个col，但在大屏幕上拿5个。）

这会给你这样的东西：

<div class='panel panel-default col-xs-12 col-md-5'>
    <div class='panel-body'>
        <h3>Bem Vindo!</h3>
        <p> Just some text. </p>
    </div>
</div>

<div class='container panel panel-default col-xs-12 col-md-offset-1 col-md-5'>
    <div class='panel-body'>
        <form action="handler.php" method="post">
            <div class='form-group'>
                <label for='sel1'><h3>Escolha um ano abaixo:</h3></label>
                <select class='form-control' id='sel1' name='anos'>
                    <!-- Função para gerar um dropdown com anos -->
                    <?php require_once('utils.php'); dropdownAnos(); ?>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Ver relatórios</button>
        </form>
    </div>
</div>

还有一件事，通常是将col-*包裹在row div中。

所以

<div class="row">
    <div class='panel panel-default col-xs-12 col-md-5'>
        <div class='panel-body'>
            <h3>Bem Vindo!</h3>
            <p> Just some text. </p>
        </div>
    </div>

    <div class='container panel panel-default col-xs-12 col-md-offset-1 col-md-5'>
        <div class='panel-body'>
            <form action="handler.php" method="post">
                <div class='form-group'>
                    <label for='sel1'><h3>Escolha um ano abaixo:</h3></label>
                    <select class='form-control' id='sel1' name='anos'>
                        <!-- Função para gerar um dropdown com anos -->
                        <?php require_once('utils.php'); dropdownAnos(); ?>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">Ver relatórios</button>
            </form>
        </div>
    </div>
</div>

使容器适应移动

2 个答案: