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>