有道右对齐面板元件引导水箱内

我一直在旋转上试图让一个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的业余爱好者，但我尝试了左/右类以及显示/位置的每个排列等。结果总是乱码。有什么建议么？

来源

2014-09-29 ChrisArmstrong

事情会如何出现依靠什么大小不同的元素。图片应该有img-responsive类。面板进入网格，因此它们不是特定的大小。我建议创建一个不同的组件，因为页眉是用于文本的，这就是它。使用网格系统。制作一排，两列col - * - 6（50％）列开始游戏。 – Christina 2014-09-29 04:10:09

你要拉左添加到H1太..有他们两个浮动..

还添加了一个.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>

来源

2014-09-29 01:09:25 thirdtiu

我不会对此，不使用.page标题，它不清楚，它是用于文本的。使用网格系统，以便您可以为面板设置尺寸，因为它们不是设定的宽度，并且要求包装具有宽度。它将以这种方式非常干净地布局。

只是一个注释：当你在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 -->

来源

2014-09-29 04:25:56 Christina

嗨@christina，这个解决方案很接近。我的面板恰好比你的例子有更多的内容，所以在呈现的页面中，我的标题顶部对齐在列中，在下面创建了很多奇怪的空白。我怎样才能在行内对齐标题和div？ – ChrisArmstrong 2014-09-29 12:08:00

有道右对齐面板元件引导水箱内

回答

相关问题