Question

我正在尝试为“团队成员”页面设置样式：图片右侧显示名称＆amp;下面有传记的图像左侧的角色。我已经为移动设计了我的布局，而且我正在使用推/拉但是我得到了一个“浮动”（虽然我认为它的功能正如预期的那样。）See Image。

<div class="container-fluid">
<div class="col-sm-8 col-sm-push-4">
    <div class="row"><h1>John Roberts</h1></div>
    <div class="row"><h2>Chief Justice</h2></div>
</div>

<div class="col-sm-4 col-sm-pull-8 tmMbr_photoWithSocial">
    <img src="1200px-Official_roberts_CJ.jpg" class="tmMbr_photo img-rounded img-responsive" alt="Photo of Chief Justice John Roberts">
</div>

<div class="tmMbr_bio col-sm-8 col-sm-push-4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec egestas velit. Nulla convallis varius ex, eget iaculis elit mollis eu. In lobortis, nisi tincidunt blandit sagittis, diam nisl ornare felis, sit amet cursus ipsum risus vitae ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta ex rutrum, eleifend massa sit amet, tempus erat. Ut tincidunt lacus ac porttitor bibendum. Praesent consectetur lorem id euismod tincidunt. Maecenas ac fermentum mi, ut iaculis lorem. Nulla molestie hendrerit velit nec luctus. Cras fringilla sem sit amet lacus pellentesque, sodales venenatis augue blandit. Nunc a velit arcu.</p>
    <p>Vivamus nec ex est. Quisque vel luctus massa. Quisque vitae ullamcorper tellus. Nunc consectetur id dui eu congue. Aliquam rutrum nunc quis lacus efficitur imperdiet. Aliquam eget mauris non sem egestas pellentesque. Phasellus sed venenatis risus, eu vehicula nulla.</p>
</div>

在没有图像的情况下正确包装，但是一旦加载任何肖像图像，“生物”块似乎想要清除它自己。我已经尝试将这些元素包装成行等等，然后像地狱一样搜索，但我无法弄清楚这一点。

对此非常全新，我正在为一个（CSS？）解决方案写作，但也确认这种行为符合预期。

Answer 1

您可以重置第一个col元素上的float属性，并在此处删除推/拉类：

.tmMbr_bio.col-sm-8.fl-r,
.col-sm-8.fl-r
{
  float:right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="col-sm-8 fl-r">
    <div class="row"><h1>John Roberts</h1></div>
    <div class="row"><h2>Chief Justice</h2></div>
</div>

<div class="col-sm-4  tmMbr_photoWithSocial">
    <img src="http://dummyimage.com/600x700&text=Official_roberts_CJ.jpg" class="tmMbr_photo img-rounded img-responsive" alt="Photo of Chief Justice John Roberts">
</div>

<div class="tmMbr_bio col-sm-8  fl-r">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec egestas velit. Nulla convallis varius ex, eget iaculis elit mollis eu. In lobortis, nisi tincidunt blandit sagittis, diam nisl ornare felis, sit amet cursus ipsum risus vitae ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta ex rutrum, eleifend massa sit amet, tempus erat. Ut tincidunt lacus ac porttitor bibendum. Praesent consectetur lorem id euismod tincidunt. Maecenas ac fermentum mi, ut iaculis lorem. Nulla molestie hendrerit velit nec luctus. Cras fringilla sem sit amet lacus pellentesque, sodales venenatis augue blandit. Nunc a velit arcu.</p>
    <p>Vivamus nec ex est. Quisque vel luctus massa. Quisque vitae ullamcorper tellus. Nunc consectetur id dui eu congue. Aliquam rutrum nunc quis lacus efficitur imperdiet. Aliquam eget mauris non sem egestas pellentesque. Phasellus sed venenatis risus, eu vehicula nulla.</p>
</div>

Bootstrap Column Push-Pull尝试移动列

1 个答案: