引导容器类不占用全宽移动设备

Question

我有一个注册表单，我正在努力使移动设备更加用户友好。我正在使用 Bootstrap 4 并试图让我的注册表单占据较小设备（如 iPhone 等）的整个屏幕宽度，我为包含我的行和表单的 div 使用了适当的容器类名称。我给我的表格一个“col”类，所以它占据了整个宽度。但问题是容器。当我尝试在我的子主题样式表中定位断点时，我无法影响容器。如何让容器拉伸 100% 的较小设备的宽度？我正在使用 Ocean-WP 子主题。您可以通过以下链接在移动设备上查看相关页面：http://www.statesoccerpass.com/player-registration-page/

<div class="container" style="border: 2px solid green;">
        <h1 id="page_title">Player Registration Page</h1>
        <?php echo $season_text ?>
            <!-- <div class="row"><?php //display_progress(1);?></div> -->
                <div class = "row">

                    <form style="border: 2px solid yellow;" class= "col" id = "player_info" name="player_info" action="http://www.statesoccerpass.com/index.php/player-registration-step-2/" method="post">  

                        <fieldset class="form-group">

                        <span>Passes are valid for both Fall 2018<?php echo $season_year_start_text; ?> and Spring 2019<?php echo $season_year_end_text; ?>&nbsp;&nbsp;&nbsp;
                        Player passes expire July 31, 2019<?php echo $this_season_end->format('n/j/Y'); ?><br /><br />Can't find your team? If your team is new for this fall, please remind your coach to register the team so that players can register.  <br /><br/>
                        </span>

                        <div class="form-group" style="border: 2px solid red;">
                                <label class="col-sm col-lg-2" for="league_id">1. Select your league</label>
                                <select class= "col-sm col-lg-10" id = "league_id" name="league_id" size="1" style="width: 304px;" onchange=""  tabindex = "2" >
                                    <option value='a' selected> -- </option>
                                    <?php echo display_active_leagues_select()?>
                                </select>
                        </div>  

                        <div class="form-group" style="border: 2px solid red;">
                                <label class="col-sm col-lg-2" for="division_id">2. Select your division</label>
                                <select class="col-sm col-lg-10" id="division_id" name="division_id" size="1" style="width: 304px;"  tabindex = "2" >
                                    <option  value='a' selected> -- </option>
                                    <!--insert divisions here via ajax -->
                                </select>
                        </div>

                        <div class="form-group" style="border: 2px solid red;">
                                <label class="col-sm col-lg-2" for="team_id">3. Select the team you want to join</label>
                                <select class="col-sm" id="team_id" name="team_id" size="1" style="width: 304px;"  tabindex = "3" >
                                    <option value='a' selected> -- </option>
                                    <!-- insert teams here via ajax --> 
                                </select>
                        </div>

                        <div class="form-group" style="border: 2px solid red;">
                                <label class="col-sm col-lg-2" for="player_first_name">Enter your first name</label>
                                <input class="col-sm" type="text" name="player_first_name" id = "player_first_name" tabindex = "4" style="width: 300px;"> 
                        </div>  

                        <div class="form-group" style="border: 2px solid red;">
                                <label class="col-sm col-lg-2" for="player_middle_name">Enter your middle name</label>
                                <input class="col-sm" type="text" name="player_middle_name" id="player_middle_name" tabindex = "5" style="width: 300px;"> 
                        </div>  

                        <div class="form-group" style="border: 2px solid red;">
                                <label class="col-sm col-lg-2" for="player_last_name">Enter your last name</label>
                                <input class="col-sm" type="text" name="player_last_name" id="player_last_name" tabindex = "6" required style="width: 300px;">
                        </div>
                        <div class="col" style = 'font-size: 12pt;'>You must have a matching government issued picture ID.</div>

                        <div class="form-group" style="border: 2px solid green;">   
                                <label class="col" for="player_birth_month" >Enter your date of birth (Month/Day/Year)</label>

                                <div class="col-sm col-lg-6" style="border: 2px solid red;margin:0 auto;">

                                    <div class="col-sm-3" style="border: 2px solid;display:inline;">
                                    <label class="col-sm-1 col-lg-1" for="player_day_month" >Month</label>
                                        <select class="col-sm-1 col-lg-1" name="player_birth_month" id="player_birth_month" required tabindex = "13">
                                            <option value=""></option>
                                            <?php select_month_input()?>
                                        </select>
                                    </div>

                                    <div class="form-group" style="border: 2px solid;display:inline;">
                                        <label class="col-sm-1 col-lg-1" for="player_day_month" >Day</label>
                                        <select class="col-sm-1 col-lg-1" name="player_birth_day" id="player_birth_day" required tabindex = "14">
                                            <option value=""></option>
                                        <?php select_day_input()?>
                                        </select>
                                    </div>

                                    <div class="form-group" style="border: 2px solid;display:inline;">
                                        <label class="col-sm-1 col-lg-1" for="player_year_month" >Year</label>
                                        <select class="col-sm-1 col-lg-1" name="player_birth_year" id="player_birth_year" required tabindex = "15">
                                            <option value=""></option>
                                        <?php select_birthyear_input()?>
                                        </select>
                                    </div>

                                </div>

                                <input type="hidden" id="product_id" name = "product_id" value="0" />
                                <input type="hidden" id = "product_type" name = "product_type" value="player_signup" />
                                <input type="submit" style="font-size:24px; color:#0000FF;" value="Continue" tabindex = "20">
                            </fieldset>
                            </form>
                    </div><!--end form row-->
            <?php
            //echo "<br/>Session user_id: " .get_session_value('user_id');
            require_once  $_SERVER ['DOCUMENT_ROOT'] . '/cart/cart-footer.php';
            require_once  $_SERVER ['DOCUMENT_ROOT'] . '/libraries/user-footer.php';
            ?>
            <?php display_admin_footer(); ?>
    </div><!--end bootstrap container div -->

我的媒体查询：

@media (min-width: 576px) {
    .container{
        max-width:100% !important;
    }
}

Answer 1

您可以尝试完全删除class="container"。您的行类在较大的设备上将页面内容保存在一起。不是最佳实践，但您不必与其他正在崩溃的列作斗争。

例子：

<div style="border: 2px solid green;">
    <h1 id="page_title">Player Registration Page</h1>
    <?php echo $season_text ?>
        <!-- <div class="row"><?php //display_progress(1);?></div> -->
            <div class = "row">

在上面提供的链接示例中，我更改了这一行：

<div id="content-wrap" class="container clr">

到

<div id="content-wrap" class="clr">

您声明了两个容器（页面上方的一个和您的绿线示例）正在相互争斗。删除其中一个，它应该可以工作。

Answer 2

你可以试试这个

@media (min-width: 576px) {
    .container{
        max-width:100% !important;
        padding-left:0px;
        padding-right:0px;

    }
}