Bootstrap响应9by16

Question

我试图提供一个16x9的"绘图空间",但我希望用户能够选择纵向或横向.我已经在使用了class="embed-responsive embed-responsive-16by9".有没有一种简单的方法来使用CSS进行更改？

编辑

请记住,我将在这些容器中添加div.它们在16x9容器中的位置应该相对于它的方向,因为我希望保存用户的绘图空间以便重新创建它.

Answer 1

您需要复制引导 css 的大部分并添加一些类前缀

我将使用简单的名称portraitandlandscape而不是embed-responsiveandembed-responsive-16by9

例如.col-md-6将.portrait .portrait-col-md-6变成.landscape .landscape-col-md-6

网格系统无非是一些百分比值和媒体查询。

所以。回去：

复制所有网格系统类。

粘贴网格系统类。复制逗号后的每个单独的类

将原件添加.landscape- 前缀 将粘贴的添加前缀.portrait-

外观如何：

原始bootstrap.css

.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}

你修改后的 bootstrap.css

.portrait .portrait .portrait-col-xs-12,.landscape .landscape-col-xs-12 {
  width: 100%;
}
.portrait .portrait-col-xs-11,.landscape .landscape-col-xs-11 {
  width: 91.66666667%;
}
.portrait .portrait-col-xs-10,.landscape .landscape-col-xs-10 {
  width: 83.33333333%;
}
.portrait .portrait-col-xs-9,.landscape .landscape-col-xs-9 {
  width: 75%;
}
.portrait .portrait-col-xs-8,.landscape .landscape-col-xs-8 {
  width: 66.66666667%;
}
.portrait .portrait-col-xs-7,.landscape .landscape-col-xs-7 {
  width: 58.33333333%;
}
.portrait .portrait-col-xs-6,.landscape .landscape-col-xs-6 {
  width: 50%;
}
.portrait .portrait-col-xs-5,.landscape .landscape-col-xs-5 {
  width: 41.66666667%;
}
.portrait .portrait-col-xs-4,.landscape .landscape-col-xs-4 {
  width: 33.33333333%;
}
.portrait .portrait-col-xs-3,.landscape .landscape-col-xs-3 {
  width: 25%;
}
.portrait .portrait-col-xs-2,.landscape .landscape-col-xs-2 {
  width: 16.66666667%;
}
.portrait .portrait-col-xs-1,.landscape .landscape-col-xs-1 {
  width: 8.33333333%;
}

当然，您必须对所有与网格系统相关的类执行此操作。

在下面的示例中，我修改了内联样式留下的浮动，但是如果您通过在通用模式类和模式特定前缀前面添加前缀来处理所有网格类，您也应该传递这些设置:-)

玩得开心！

.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}

.portrait .portrait .portrait-col-xs-12,.landscape .landscape-col-xs-12 {
  width: 100%;
}
.portrait .portrait-col-xs-11,.landscape .landscape-col-xs-11 {
  width: 91.66666667%;
}
.portrait .portrait-col-xs-10,.landscape .landscape-col-xs-10 {
  width: 83.33333333%;
}
.portrait .portrait-col-xs-9,.landscape .landscape-col-xs-9 {
  width: 75%;
}
.portrait .portrait-col-xs-8,.landscape .landscape-col-xs-8 {
  width: 66.66666667%;
}
.portrait .portrait-col-xs-7,.landscape .landscape-col-xs-7 {
  width: 58.33333333%;
}
.portrait .portrait-col-xs-6,.landscape .landscape-col-xs-6 {
  width: 50%;
}
.portrait .portrait-col-xs-5,.landscape .landscape-col-xs-5 {
  width: 41.66666667%;
}
.portrait .portrait-col-xs-4,.landscape .landscape-col-xs-4 {
  width: 33.33333333%;
}
.portrait .portrait-col-xs-3,.landscape .landscape-col-xs-3 {
  width: 25%;
}
.portrait .portrait-col-xs-2,.landscape .landscape-col-xs-2 {
  width: 16.66666667%;
}
.portrait .portrait-col-xs-1,.landscape .landscape-col-xs-1 {
  width: 8.33333333%;
}

$('#thetoggle').on('click',function(){
  var container = $(".container");
  if(container.hasClass('portrait')) {
     container.removeClass('portrait');
     container.addClass('landscape');
     $(this).text('Toggle mode to portrait');
  }
  else {
    container.removeClass('landscape');
    container.addClass('portrait');
    $(this).text('Toggle mode to landscape');
    }
});