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>
	<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>

调整bootstrap手风琴的大小

1 个答案: