Question

我试图让div面板元素显示在页面的右上角，与h1元素在同一行上，我一直在旋转我的轮子：

<div class="container">
        <div class="page-header">
            <h1>
                <img src="logo.png"> Page title
            </h1>
            <div class="panel panel-primary">
            ...content...
            </div>
        </div>
        ...
</div>

我有点像CSS / HTML的业余爱好者，但是我尝试了左/右上课以及显示/位置的每个排列等。结果总是出现乱码。有什么建议吗？

Answer 1

你必须向左侧添加左拉..让两者都浮动..

还将.cleafix类添加到页眉div

<div class="container">
    <div class="page-header clearfix">
        <h1 class="pull-left">
            <img src="logo.png"> Page title
        </h1>
        <div class="panel panel-primary pull-right">
        ...content...
        </div>
    </div>
    ...
 </div>

Answer 2

我不会为此使用.page-header，它不清楚，它意味着文本。使用网格系统，以便您可以设置面板的大小，因为它们不是设置的宽度，并且需要包装器具有宽度。它会以这种方式非常干净地布局。

请注意：当你在Bootstrap中使用.pull-right和.pull-left类时，这些类覆盖了所有视口大小，当视口变小时，结果看起来非常令人讨厌。

DEMO：http://jsbin.com/sadup/1

<div class="container">
   <div class="row">
      <div class="col-sm-8">
        <img src="http://placehold.it/200x75/444444/FFFFFF&text=logo" class="img-responsive" alt="Logo">
      </div>
      <!--/.col-sm-8 -->
      <div class="col-sm-4">
         <div class="panel panel-primary">
            <div class="panel-heading">
               <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
               Panel content
            </div>
         </div>
      </div>
      <!--/.col-sm-4 -->

   </div>
   <!--/.row -->

</div>
<!--/.container -->

在Bootstrap标头内对齐右侧面板元素的正确方法

2 个答案: