我有一个注册表, 我试图使用户更友好地使用移动设备。我正在使用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">
在上面提供的链接示例中, 我更改了这一行:
<
div id="content-wrap" class="container clr">
to
<
div id="content-wrap" class="clr">
你声明了两个相互竞争的容器(页面上一个较高的容器和一个绿线示例)。删除其中之一, 它应该可以工作。
#2【Bootstrap容器类不占用全宽度移动设备】你可以试试这个
@media (min-width: 576px) {
.container{
max-width:100% !important;
padding-left:0px;
padding-right:0px;
}
}
推荐阅读
- WP如何使用PHP调用小部件
- 本地安排上HTTPS的最佳途径~
- Linux 3
- Makefile系列--全面讲解
- linux之chsh命令
- K8s Get "http://127.0.0.1:10252/healthz": dial tcp
- 前端软件系列--curl
- 重新学习C语言day07
- 入门学Python一定要知道的requests模块安装及使用