Question

我对Twitter引导程序很新，并且遇到以下结构问题

<Container> - Using Fluid container
   <Row 1>      
     <Column 1> - Covers 6 columns
       <Row 1> - Electricity
       <Row 2> - Electricity Graph
       <Row 3> - Electricity Table
    </Column 1>
    <Column 2> - Covers 6 columns
      <Row 1> - Gas
      <Row 2> - Gas Graph
      <Row 3> - Gas Table
    </Column 2>
  </Row 1>
  <Row 2> - covers entire width
     Table
  </Row 2>
<Container>

See here for page

正如您所看到的，内容已经偏离了左侧页面的边缘

有谁知道可能导致这种情况的原因？

如何才能获得可靠的小幅度左右？

Chrome甚至在渲染第一个标题时出现问题

虽然没有很大的重叠，但内容比导致水平滚动条的实际浏览器宽度更宽？

标记太大，无法在此处发布，因此here是指向它的链接。

Answer 1

似乎有两件不同的事情在发生。首先，保罗在上面的评论中提到，SVG图表对于容器而言太大了，并且正在推出盒子。可以通过向overflow:hidden

添加<div class="col-md-6">来解决此问题

其次，你使用bootstrap .row类的方式是不正确的，它弄乱了布局。例如，您的结构正在使用：

<!-- THIS IS NOT CORRECT NESTING -->
<div class="col-md-6">
    <div class="heading row">...</div>
    <div class="row">...</div>
    <div class="row sectionHeading">...</div>
    <div class="row">...</div>
</div>

.row只应用于将.col-xs-*, .col-sm-*, .col-md-*, .col-lg-*列作为.row的直接子项。如果它们嵌套不正确，则会出现边距和填充问题，因为.row具有负左右边距以调整列中的装订线。在上面的示例中，应删除.row类，因为div会自然地堆叠在一起，并且它们会创建不必要的空间。

据说，我发现奇怪的一件事是，为了完全删除水平间距，我必须删除row标签的所有实例，当它们应该像往常一样工作时...希望帮助

为什么我的twitter引导程序页面会脱离页面的边缘？

1 个答案: