我有一个注册表, 我试图使用户更友好地使用移动设备。我正在使用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; ?>
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;
}
}
#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">
to
<div id="content-wrap" class="clr">
你声明了两个相互竞争的容器(页面上一个较高的容器和一个绿线示例)。删除其中之一, 它应该可以工作。
#2
你可以试试这个
@media (min-width: 576px) {
.container{
max-width:100% !important;
padding-left:0px;
padding-right:0px;
}
}
来源：
https://www.srcmini02.com/62851.html
