我有一个注册表，我试图使用户更友好地使用移动设备。我正在使用Bootstrap 4并尝试获取我的注册表格，以占用iPhone等较小设备的整个屏幕宽度，我为div使用了合适的容器类名称，其中包含我的行和表格。我给了我的形式一类“ col”，所以它占据了整个宽度。但是问题是容器。当我尝试在子主题的样式表中定位断点时，我无法影响容器。我如何才能使容器拉伸较小设备宽度的100％？我正在使用Ocean-WP儿童主题。您可以通过以下链接在移动设备上查看相关页面：http://www.statesoccerpass.com/player-registration-page/
return 0;我的媒体查询：
<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; ?>
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 -->
答案 0 :(得分：2)
您可以尝试
@media (min-width: 576px) {
.container{
max-width:100% !important;
padding-left:0px;
padding-right:0px;
}
}
答案 1 :(得分：0)
您可以尝试完全删除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">
您声明了两个互相竞争的容器（页面上一个较高，并且您的绿线示例为高）。删除其中一个，它应该可以工作。