Question

我有一个简单的引导程序布局

<div class="container-fluid">
    <div class="row">
         <div class="col-sm-8">
              <div class="upper"></div>
         </div>
         <div class="col-sm-4">
              <div class="lower"></div>
         </div>
    </div>
</div>

CSS

.upper {
height: 100%;
width: 100%;
}

.lower {
height: 100%;
width: 100%;
}

如果屏幕为sm，则上部div位于顶部，另一个位于屏幕下方。每次填充100% width and height。但是，如果屏幕为sm，则upper只有80% height。有没有办法在bootstrap中解决这个问题？或者或许还有其他一些jquery的聪明方式。

Answer 1

你可以在sm之后在每个div中添加xs类，或者也可以使用媒体查询

    <Button>
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click" >
                <BeginStoryboard>
                  <StoryBoard TargetName="..." TargetProperty="...">
                 ... change column with here
                  </StoryBoard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>

或

<div class="container-fluid">
    <div class="row">
         <div class="col-sm-8 col-xs-8">
              <div class="upper"></div>
         </div>
         <div class="col-sm-4 col-xs-4">
              <div class="lower"></div>
         </div>
    </div>
</div>

Answer 2

您可以使用响应式CSS媒体查询执行此操作：

@media (min-width: 768px) {
    .upper {
        height: 80%;
    }
}

这对你现有的CSS有意义，因为Bootstrap更喜欢移动优先的开发方法。您现有的.upper CSS规则仅适用于超小（xs）视口，当视口伸出（小/ sm）时，此规则将覆盖您的xs规则。

如果bootstrap col不是水平的，则更改css

2 个答案: