Bootstrap容器类不占用全宽度移动设备

我有一个注册表, 我试图使用户更友好地使用移动设备。我正在使用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 vhttp://www.srcmini.com/alue='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" > < optionvhttp://www.srcmini.com/alue='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 vhttp://www.srcmini.com/alue='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="http://www.srcmini.com/0" /> < input type="hidden" id = "product_type" name = "product_type" value="http://www.srcmini.com/player_signup" /> < input type="submit" style="font-size:24px; color:#0000FF; " value="http://www.srcmini.com/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; } }

#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">

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