带有 Bootstrap 的响应式页面答案

【问题标题】：Responsive page with Bootstrap带有 Bootstrap 的响应式页面
【发布时间】：2016-12-24 03:05:21
【问题描述】：

我有下面的页面，我正在尝试使用 Bootstrap 使其响应。
第一列有一些文字，第二列有一个表格。
你能帮我理解为什么当我扩展浏览器时它不起作用吗？

<div class="container-fluid">
   <h1 class="title-2 title-3"><span style="font-size: 36px; line-height: 40px;">TITLE1</span></h1>
      <div class="row">
         <div class="col-sm-6">
            <ul>
             <li>Text1</li>
             <li>Text2</li>
             <li>Text3</li>
            </ul>
         </div>   

<div class="col-sm-6">
   <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>
                //form 
    <div class="row submit">
                <?php echo $form->getElement("post_now")?>
    </div>

【问题讨论】：

我想你忘了问一个具体问题。
我编辑了一个问题

标签： php html twitter-bootstrap zend-framework responsive-design

【解决方案1】：

除了将以下链接添加到您的 <head> 之外，它看起来工作正常：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

更新既然我们知道它在那里，请尝试将您的代码更新为此。我将您的班级标签更新为.col-md-6 并关闭了您的一些其他标签。这是一个fiddle 来查看非单列。

<div class="container">
<h1 class="title-2 title-3"><span style="font-size: 36px; line-height: 40px;">TITLE1</span></h1>

<div class="row">
  <div class="col-md-6">
      <ul>
        <li>Text1</li>
        <li>Text2</li>
        <li>Text3</li>
      </ul>
  </div>
  <div class="col-md-6">
  
     <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 class="col-md-6">
          <?php echo $form->getElement("post_now")?>
      </div>
    </div>
  
  </div>
</div>

【讨论】：

它被添加到头部抱歉我没有将它包含在我的粘贴中。它不工作:(
只是为了澄清一个想法。当您缩放浏览器而不是手机时，它是否有效？