Bootstrap 侧边栏主题答案

【问题标题】：Bootstrap Sidebar ThemeBootstrap 侧边栏主题
【发布时间】：2013-12-13 16:15:11
【问题描述】：

我想用左侧边栏的菜单制作一个 Bootstrap 主题。问题是我无法修复侧边栏菜单后的内容。截图如下：

内容被放置在一行中，在 4 个 span3 div 中。如何使此内容直接移动到侧边栏导航旁边？

<?php 
if ( !defined('ABSPATH')) exit; 
get_header(); 
?>

<?php if(is_front_page()): ?>
<div class="row wpeden-bs-services">
  <?php for($i=1;$i<=4;$i++){ ?>
    <div class="span3">
    <?php $tpid = (int)bleed_get_theme_opts('home_featured_page_'.$i);     $intropage=get_page($tpid); $introcontent = strip_tags(strip_shortcodes($intropage->post_content),"p,br"); if (preg_match('/^.{1,80}\b/s', $introcontent, $match)) $introcontent = $match[0]; else $introcontent = substr($introcontent,0,80);  ?>
    <div class="about well">
      <a href="<?php echo get_permalink($intropage->ID); ?>"><?php bleed_thumb($intropage,array(500,300), array('class'=>'img')); ?></a>
      <div class="entry-content">
      <h2><?php echo $intropage->post_title; ?></h2>
      <p><?php echo $introcontent; ?></p>
      </div>
      <a href="<?php echo get_permalink($intropage->ID); ?>" class="btn <?php echo bleed_get_theme_opts('button_style','btn-info'); ?> btn-block">View details</a>
    </div>  
    </div>
    <?php } ?>

    <!-- /.span4 -->
    <?php get_template_part('homepage','category'); ?>

   <div class="clear"></div>
   <div>
   </div>          

   </div><!-- /.span4 -->

   <?php endif; ?> 
   <?php get_footer(); ?>

【问题讨论】：

这是问题的截图。感谢您的帮助！ i.stack.imgur.com/Xu7PX.png
你能做一个 jsfiddle.net 例子并发布链接吗？您需要排除 PHP 调用。查看页面的来源并从那里发布标记
jsfiddle.net/EWP32/6 我试着做点什么，不知道对不对。

标签： html css wordpress twitter-bootstrap

【解决方案1】：

如果我理解正确，您似乎需要嵌套行。

<div class="row">
    <div class="span4">
        side bar here
    </div>
    <div class="span8">
        nested content goes here
        <div class="row">   
            <div class="span3"></div>
            <div class="span3"></div>
            <div class="span3"></div>
            <div class="span3"></div>
        </div>
    </div>
</div>

【讨论】：

您在某处的虚拟主机上有这个网站吗？你有网址吗？

【解决方案2】：

此模板具有响应式菜单切换系统。菜单将在较小的屏幕上显示为折叠状态，而在较大的屏幕上显示为非折叠状态。使用下面的按钮切换时，菜单将出现/消失。在小屏幕上，页面内容将被推离画布。

确保将所有页面内容保留在#page-content-wrapper 中。

http://blackrockdigital.github.io/startbootstrap-simple-sidebar/

【讨论】：