resizing bootstrap accordion

Question

我有一段网站使用h2，后面是手风琴。我试图让手风琴和h2拉左，然而手风琴的尺寸是错误的，除非它扩大了，而扩大了它自身。我有一个侧栏设置为：<div class="col-md-3"> 因此我希望h2和手风琴位于右侧，但占据右侧的全屏。我的手风琴和H2被设置如下：

<div class="col-md-9 pull-right"> 
    <div class="panel-body"> 
    <h2 class="page-header col-md-9 pull-left">Action Strategies: What We Can Do Now</h2> 
     <div class="panel-group col-md-9 pull-left" id="accordion"> 

，象这样每个面板：

<!-- /.panel --> 
<div class="panel panel-default"> 
    <div class="panel-heading teachers"> 
    <h4 class="panel-title"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Teachers and Support Staff</a> 
    </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse"> 
    <div class="panel-body"> 
    <!-- content --> 
    </div> 
    </div> 
</div> 

Answer 1

当我明白你的问题，pull-right原因造成的。如果这是你需要的，请参阅附件中的片段。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
<div class="col-md-3"> 
 
    <h3>Sidebar</h3> 
 
\t <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro esse officiis ipsa, placeat praesentium laborum rerum iste aspernatur omnis ratione exercitationem eligendi. Soluta id ipsa nisi ex! Cumque, voluptatum laudantium hic, ea cum, vitae aperiam expedita delectus autem iusto nam voluptatem dolorum fugiat? Laudantium minima, eos eius harum voluptatem error!</div> 
 
</div> 
 

 
<div class="col-md-9"> 
 

 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <h2 class="page-header col-md-9 pull-left">Action Strategies: What We Can Do Now</h2> 
 
     </div> 
 
    </div> 
 

 
    <div class="panel-group " id="accordion"> 
 

 
     <div class="panel panel-default"> 
 
      <div class="panel-heading teachers"> 
 
       <h4 class="panel-title"> 
 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1">Teachers and Support Staff 1</a> 
 
       </h4> 
 
      </div> 
 
      <div id="collapse1" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos architecto atque nemo nisi explicabo dolor. Magni perferendis modi vero pariatur officia consectetur, vitae id. Aspernatur officia nam ipsum ea dolorum laborum error maxime quidem provident rerum facere eum, unde? Ducimus quos provident adipisci, odit porro itaque eligendi beatae obcaecati tenetur minima officiis libero, nesciunt quidem autem ex cupiditate ratione veniam repellat est consequuntur quibusdam aut suscipit at. Provident quod, dolor quae incidunt vitae non neque, molestiae minus veritatis deleniti eligendi laboriosam blanditiis nostrum eum quia qui voluptas nemo expedita aliquam dolorum nihil. Quas dolor neque voluptatibus quos optio reprehenderit, impedit? 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading teachers"> 
 
       <h4 class="panel-title"> 
 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Teachers and Support Staff 2</a> 
 
       </h4> 
 
      </div> 
 
      <div id="collapse2" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ex laboriosam libero suscipit natus, voluptatibus, perferendis eos omnis impedit minima fugit a ipsum ipsa rem numquam placeat provident magnam asperiores mollitia vero magni laudantium pariatur. Obcaecati error rem dolor itaque quidem eligendi, voluptas vero voluptatem, labore adipisci perferendis quia velit reiciendis illo libero optio. Aliquam autem labore voluptas veritatis praesentium, in a tempore accusamus error ad laboriosam omnis consequuntur, pariatur dolor voluptates dolores vel. Repellat animi tenetur expedita nobis est a natus hic adipisci eligendi aliquam quo minus, dolorum nihil provident odit delectus suscipit omnis nostrum quod magni, voluptatum. Laboriosam! 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading teachers"> 
 
       <h4 class="panel-title"> 
 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse3">Teachers and Support Staff 3</a> 
 
       </h4> 
 
      </div> 
 
      <div id="collapse3" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, voluptatem, itaque cumque dolorem dicta eveniet porro voluptatibus unde ad nostrum est accusantium veniam, iste natus incidunt quis consectetur quod placeat deserunt corporis veritatis quidem! Eaque facilis quasi, rem reiciendis! Voluptatibus quasi, necessitatibus repellendus impedit, fugit minima vero eius, perferendis dignissimos vel nulla velit! Error commodi veniam maxime reprehenderit aut sint voluptatem id culpa autem corrupti optio expedita blanditiis odit dolorem obcaecati vitae delectus ea necessitatibus beatae laboriosam aliquid, eos eveniet nobis quos quidem? Quia itaque dicta quasi perferendis earum, fuga illo aperiam architecto nisi iure suscipit omnis esse facilis, saepe. 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div> 
 
</div>