我正在使用 php 和 bootstrap。
我有两列,左边显示文本,右边显示表格:
现在,当我在桌面上时,我会看到两列。
在手机上,我只想看表格。
我设法创建了一个 CSS/Bootstrap,以便在移动设备上看不到左栏的内容。现在,我需要帮助来更改表格点:在桌面上它必须保持在右侧,而在移动设备上则必须在左侧。
UPDATED VERSION:
<div class="container">
<div class="row">
<div class="hidden-xs hidden-sm col-md-6">
<h1 class="title-2 title-3"><span style="font-size: 36px; line-height: 40px;">title </span></h1>
<ul>
<li ><b>TEXT1</b></li>
<li><strong>TEXT2</strong></li>
<li><strong>TEXT3</strong></li>
<li><strong>TEXT4</strong></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<form>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<?php echo $form->getElement("first_name")?>
</div>
<div class="col-md-6">
<?php echo $form->getElement("last_name")?>
</div>
</div>
</div>
<div class="form-group">
<?php if($form->getElement("company")):?>
<?php echo $form->getElement("company")?>
<?php endif;?>
<?php if($form->getElement("company_url")):?>
<div class="row">
<?php echo $form->getElement("company_url")?>
</div>
</div>
//more form
<div class="row submit">
<?php echo $form->getElement("post_now")?>
</div>
</form>
</div>
</div>
</div>
<div class="no-mobile">
<h1 class="title-2 title-3"><span style="font-size: 36px; line-height: 40px;">TITLE </span></h1>
<ul>
<li ><b> TEXT 1 </b></li>
<li><strong> TEXT 2 </strong></li>
<li><strong> TEXT 3 </strong></li>
</ul>
</div>
<div class="row">
<div class="grid_6">
<?php echo $form->getElement("first_name")?>
</div>
<div class="grid_6">
<?php echo $form->getElement("last_name")?>
</div>
</div>
<?php if($form->getElement("company")):?>
<div class="row">
<?php echo $form->getElement("company")?>
</div>
<?php endif;?>
<?php if($form->getElement("company_url")):?>
<div class="row">
<?php echo $form->getElement("company_url")?>
</div>
<?php endif;?>
<div class="row">
<?php echo $form->getElement("email")?>
</div>
<div class="row">
<div class="grid_6">
<?php echo $form->getElement("password")?>
</div>
<div class="grid_6">
<?php echo $form->getElement("repeat_password")?>
</div>
</div>
<div class="row submit">
<?php echo $form->getElement("post_now")?>
</div>
body{
margin:0;
color:#000;
font:16px/24px 'Source Sans Pro', Verdana, Geneva, sans-serif;
font-weight: 300;
background:#fff;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:none;
min-width:960px;
}
.grid_6{
float:left;
margin:0 1% 0 0!important;
}
.grid_6{
width:49%;
}
.no-mobile{display:none;}
最佳答案
Bootstrap 已经提供了一种在某些断点处隐藏列的方法。您不会在网格文档中看到它,因为它位于 Responsive Utilities 中。 .
在包含您的文本的左侧列上使用 hidden-xs
和 hidden-sm
类。在右侧的列中使用 col-sm-12
使其以小宽度全屏显示。 (如果您需要不同的断点,请使用您需要的任何大小。)
您可以通过全屏显示并调整浏览器窗口大小来尝试下面的示例。宽度较小时,左侧列消失,右侧列占据剩余空间。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="hidden-xs hidden-sm col-md-6">
<p>Your text would go here</p>
</div>
<div class="col-sm-12 col-md-6">
<p>Your form goes here</p>
</div>
</div>
</div>
我不知道您的 PHP 正在生成什么,但我也建议您使用 Bootstrap 的表单类,并且不要在不使用任何 col 的情况下将内容放入
类。结果看起来像这样:row
div -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="hidden-xs hidden-sm col-md-6">
<h1 class="title-2 title-3"><span style="font-size: 36px; line-height: 40px;">TITLE </span></h1>
<ul>
<li><b> TEXT 1 </b>
</li>
<li><strong> TEXT 2 </strong>
</li>
<li><strong> TEXT 3 </strong>
</li>
</ul>
</div>
<div class="col-sm-12 col-md-6">
<form>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<?php echo $form->getElement("first_name")?>
</div>
<div class="col-md-6">
<?php echo $form->getElement("last_name")?>
</div>
</div>
</div>
<?php if($form->getElement("company")):?>
<div class="form-group">
<?php echo $form->getElement("company")?>
</div>
<?php endif;?>
<!-- continue with your form -->
</form>
</div>
</div>
关于php - 表单的非移动更改内容列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41400048/