Question

我正在努力使用SharePoint网站中的Bootstrap行和列。问题是我不能也不想更改源自SharePoint的样式，但仍然可以在页面的一部分中使用Bootstrap网格。

我试图在没有Bootstrap和SharePoint的情况下说明问题。这是JSFiddle：

以下是我的示例的完整说明。问题是，一旦我使用一行将元素B与C，D和E分开，侧元素A的高度会影响第一行的高度，这是我不想要的。我希望元素C直接出现在元素B下面。第二个例子是我在添加div.row元素之前的样子。

下面是隔离示例的HTML和CSS。我曾希望我可以某种方式设置div.main元素的样式，以便A的浮点数不会影响B-E的浮点数。但我无法理解。

请注意，如果我开始更改HTML和样式（比如使用位置），我肯定有几种解决方案，但我真的只想知道在CSS中div.main元素获取的方法是否存在“它自己的”浮动区域，不受A元素浮动的影响。

<style>
  section {
    width: 600px;
    margin: auto;
  }
  .block {
    float: left;
    margin: 10px;
    background-color: #339;
    color: #fff;
    width: 140px;
    padding: 10px;
  }
  .side {
    width: 200px;
    height: 100px;
  }
  .main {
    margin-left: 240px;
  }
  .row:after {
    display: table;
    content: ' ';
    clear: both;
  }
</style>
<section>
  <div class="side block">This is element A in problematic example. I want element C immediately below element B, regardless of the height of this element</div>
  <div class="main">
    <div class="row">
      <div class="block">This is element B</div>
    </div>
    <div class="row">
      <div class="block">This is element C</div>
      <div class="block">This is element D</div>
      <div class="block">This is element E</div>
    </div>
  </div>
</section>
<section>
  <div class="side block">This is element A when it works but without rows</div>
  <div class="main">
    <div class="block">This is element B</div>
    <div class="block">This is element C</div>
    <div class="block">This is element D</div>
    <div class="block">This is element E</div>
    <div class="block">This is element F</div>
    <div class="block">This is element G</div>
    <div class="block">This is element H</div>
    <div class="block">This is element I</div>
  </div>
</section>

Answer 1

如果您将.main的CSS更改为此display: table-row;），则似乎有效：

.main {
  margin-left: 240px;
  display: table-row;
}

更新了JSFiddle here

更新1

将table更改为table-row，因为它在IE10中无效。

更新2

为了将来参考，SharePoint / O365中使用的最终解决方案类似于this：

HTML（.container是一个引导容器）

<div id="DeltaPlaceHolderMain">
    <div class="container">
        <div class="inner-container">
            <!--Your content here-->
        </div>
    </div>
</div>

CSS

.container .inner-container {
    display: inline-block;
    width: 100%;
}

Answer 2

.main需要浮动：左边，它需要有更少的px到宽度。

尝试定义

  .side {width:30%; float:left;}
  .main{width:70%; float:left; margin-left:0; }

不要忘记清理.main

的左边距

Answer 3

clear: both伪类上的row:after属性导致第二行跳到左浮动side元素下方。

在bootstrap中，您应该在col-md-4元素上使用classname side，在col-md-8元素上使用classname main，并从{float: left中移除side属性{1}}元素。这将为您提供2列，一列为side，宽度为4格，另一列为main，宽度为8格。一旦浮动消失，你的行应该按预期运行。

<style>
  section {
    width: 600px;
    margin: auto;
  }
  .block {
    background-color: #339;
    color: #fff;
    padding: 10px;
  }
</style>

<section class="row">
  <div class="block col-md-4">This is element A</div>
  <div class="col-md-8">
    <div class="row">
      <div class="block col-md-6">This is element B</div>
    </div>
    <div class="row">
      <div class="block col-md-6">This is element C</div>
      <div class="block col-md-6">This is element D</div>
      <div class="block col-md-6">This is element E</div>
    </div>
  </div>
</section>

一般来说，使用bootstrap你不想漂浮东西。此外，不是显式设置元素宽度，而是最好使用.col-类使它们适合引导网格系统。

如何将浮动区域彼此分开？

3 个答案: