Question

我正在使用php和bootstrap。

我有两列，LEFT显示文字，右边显示一个表格：
现在，当我在桌面上时，我看到两列。
在手机上，我只想看表格。

我设法创建了一个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;}

Answer 1

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的表单类，不要在不使用任何row类的情况下将内容放在col- 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>

表单的无移动更改内容列

1 个答案: