Bootstrap响应9by16

时间：2016-03-10 14:23:34

标签： jquery css3 twitter-bootstrap-3

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

修改

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

3 个答案:

答案 0 :(得分：1)

我做了什么：
我创建了一个包含flexbox的网格，您可以使用简单的js-action和orientation更改button。除了bootstrap button css和html之外，此解决方案不涉及flexbox。

<强>解决方案：
you can check it out on: jsfiddle.net

备注：

  • 因为它是responsive design，所以它附带max-width。您可以 玩这些元素的大小，也可以添加一些 关于max-height或overflow: auto和{。}的限制 sizing and margins。
  • 背景颜色仅供演示之用。
  • '实际'内容包含在2个div中。第一个用于user content。在内部div中，您可以根据需要放置container。
  • 如果您不希望每个width/height采用相同的尺寸，您只需将内部div的auto设置为$('[data-js-flip]').on('click', function() { $('[data-js-board]').toggleClass('flipped'); })即可让内容占用尽可能多的空间因为它需要。

我希望这是你的想法。如果没有，请在您的问题中添加更多详细信息，以便我可以相应地调整我的解决方案。

修改
这更像是吗？ updated version with bootstrap 

* {
  box-sizing: border-box;
}

.board {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: auto;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

.board-container {
  width: 6.25%;
  height: auto;
  padding: 4px;
  background-color: wheat;
}

.board-container:nth-child(n):nth-child(-n+16) {
  background-color: tomato;
}

.board-container:nth-child(n+33):nth-child(-n+48) {
  background-color: tomato;
}

.board-container:nth-child(n+65):nth-child(-n+80) {
  background-color: tomato;
}

.board-container:nth-child(n+97):nth-child(-n+112) {
  background-color: tomato;
}

.board-container:nth-child(n+129):nth-child(-n+144) {
  background-color: tomato;
}

.board.flipped > .board-container {
  background-color: wheat;
}

.board.flipped > .board-container:nth-child(n):nth-child(-n+9) {
  background-color: tomato;
}

.board.flipped > .board-container:nth-child(n+19):nth-child(-n+27) {
  background-color: tomato;
}

.board.flipped > .board-container:nth-child(n+37):nth-child(-n+45) {
  background-color: tomato;
}

.board.flipped > .board-container:nth-child(n+55):nth-child(-n+63) {
  background-color: tomato;
}

.board.flipped > .board-container:nth-child(n+73):nth-child(-n+81) {
  background-color: tomato;
}

.board.flipped > .board-container:nth-child(n+91):nth-child(-n+99) {
  background-color: tomato;
}

.board.flipped > .board-container:nth-child(n+109):nth-child(-n+117) {
  background-color: tomato;
}

.board.flipped > .board-container:nth-child(n+127):nth-child(-n+135) {
  background-color: tomato;
}

.board.flipped > .board-container {
  width: 11.1111%;
}

.content {
  background: lightgray;
  height: 100%;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="embed-responsive embed-responsive-16by9">
<div class="board" data-js-board>
  <div class="board-container">
    <div class="content">#1</div>
  </div>
  <div class="board-container">
    <div class="content">#2</div>
  </div>
  <div class="board-container">
    <div class="content">#3</div>
  </div>
  <div class="board-container">
    <div class="content">#4</div>
  </div>
  <div class="board-container">
    <div class="content">#5 here some stuff</div>
  </div>
  <div class="board-container">
    <div class="content">#6</div>
  </div>
  <div class="board-container">
    <div class="content">#7</div>
  </div>
  <div class="board-container">
    <div class="content">#8</div>
  </div>
  <div class="board-container">
    <div class="content">#9</div>
  </div>
  <div class="board-container">
    <div class="content">#10 more content</div>
  </div>
  <div class="board-container">
    <div class="content">#11</div>
  </div>
  <div class="board-container">
    <div class="content">#12</div>
  </div>
  <div class="board-container">
    <div class="content">#13</div>
  </div>
  <div class="board-container">
    <div class="content">#14</div>
  </div>
  <div class="board-container">
    <div class="content">#15 here too</div>
  </div>
  <div class="board-container">
    <div class="content">#16</div>
  </div>
  <div class="board-container">
    <div class="content">#17</div>
  </div>
  <div class="board-container">
    <div class="content">#18</div>
  </div>
  <div class="board-container">
    <div class="content">#19</div>
  </div>
  <div class="board-container">
    <div class="content">#20 content is cool</div>
  </div>
  <div class="board-container">
    <div class="content">#21</div>
  </div>
  <div class="board-container">
    <div class="content">#22</div>
  </div>
  <div class="board-container">
    <div class="content">#23</div>
  </div>
  <div class="board-container">
    <div class="content">#24</div>
  </div>
  <div class="board-container">
    <div class="content">#25 good stuff</div>
  </div>
  <div class="board-container">
    <div class="content">#26</div>
  </div>
  <div class="board-container">
    <div class="content">#27</div>
  </div>
  <div class="board-container">
    <div class="content">#28</div>
  </div>
  <div class="board-container">
    <div class="content">#29</div>
  </div>
  <div class="board-container">
    <div class="content">#30 don't forget about me</div>
  </div>
  <div class="board-container">
    <div class="content">#31</div>
  </div>
  <div class="board-container">
    <div class="content">#32</div>
  </div>
  <div class="board-container">
    <div class="content">#33</div>
  </div>
  <div class="board-container">
    <div class="content">#34</div>
  </div>
  <div class="board-container">
    <div class="content">#35 and me ...</div>
  </div>
  <div class="board-container">
    <div class="content">#36</div>
  </div>
  <div class="board-container">
    <div class="content">#37</div>
  </div>
  <div class="board-container">
    <div class="content">#38</div>
  </div>
  <div class="board-container">
    <div class="content">#39</div>
  </div>
  <div class="board-container">
    <div class="content">#40 third.</div>
  </div>
  <div class="board-container">
    <div class="content">#41</div>
  </div>
  <div class="board-container">
    <div class="content">#42</div>
  </div>
  <div class="board-container">
    <div class="content">#43</div>
  </div>
  <div class="board-container">
    <div class="content">#44</div>
  </div>
  <div class="board-container">
    <div class="content">#45 nice</div>
  </div>
  <div class="board-container">
    <div class="content">#46</div>
  </div>
  <div class="board-container">
    <div class="content">#47</div>
  </div>
  <div class="board-container">
    <div class="content">#48</div>
  </div>
  <div class="board-container">
    <div class="content">#49</div>
  </div>
  <div class="board-container">
    <div class="content">#50</div>
  </div>
  <div class="board-container">
    <div class="content">#51</div>
  </div>
  <div class="board-container">
    <div class="content">#52</div>
  </div>
  <div class="board-container">
    <div class="content">#53 here some stuff</div>
  </div>
  <div class="board-container">
    <div class="content">#54</div>
  </div>
  <div class="board-container">
    <div class="content">#55</div>
  </div>
  <div class="board-container">
    <div class="content">#56</div>
  </div>
  <div class="board-container">
    <div class="content">#57</div>
  </div>
  <div class="board-container">
    <div class="content">#58 more content</div>
  </div>
  <div class="board-container">
    <div class="content">#59</div>
  </div>
  <div class="board-container">
    <div class="content">#60</div>
  </div>
  <div class="board-container">
    <div class="content">#61</div>
  </div>
  <div class="board-container">
    <div class="content">#62</div>
  </div>
  <div class="board-container">
    <div class="content">#63 here too</div>
  </div>
  <div class="board-container">
    <div class="content">#64</div>
  </div>
  <div class="board-container">
    <div class="content">#65</div>
  </div>
  <div class="board-container">
    <div class="content">#66</div>
  </div>
  <div class="board-container">
    <div class="content">#67</div>
  </div>
  <div class="board-container">
    <div class="content">#68 content is cool</div>
  </div>
  <div class="board-container">
    <div class="content">#69</div>
  </div>
  <div class="board-container">
    <div class="content">#70</div>
  </div>
  <div class="board-container">
    <div class="content">#71</div>
  </div>
  <div class="board-container">
    <div class="content">#72</div>
  </div>
  <div class="board-container">
    <div class="content">#73 good stuff</div>
  </div>
  <div class="board-container">
    <div class="content">#74</div>
  </div>
  <div class="board-container">
    <div class="content">#75</div>
  </div>
  <div class="board-container">
    <div class="content">#76</div>
  </div>
  <div class="board-container">
    <div class="content">#77</div>
  </div>
  <div class="board-container">
    <div class="content">#78 don't forget about me</div>
  </div>
  <div class="board-container">
    <div class="content">#79</div>
  </div>
  <div class="board-container">
    <div class="content">#80</div>
  </div>
  <div class="board-container">
    <div class="content">#81</div>
  </div>
  <div class="board-container">
    <div class="content">#82</div>
  </div>
  <div class="board-container">
    <div class="content">#83 and me ...</div>
  </div>
  <div class="board-container">
    <div class="content">#84</div>
  </div>
  <div class="board-container">
    <div class="content">#85</div>
  </div>
  <div class="board-container">
    <div class="content">#86</div>
  </div>
  <div class="board-container">
    <div class="content">#87</div>
  </div>
  <div class="board-container">
    <div class="content">#88 third.</div>
  </div>
  <div class="board-container">
    <div class="content">#89</div>
  </div>
  <div class="board-container">
    <div class="content">#90</div>
  </div>
  <div class="board-container">
    <div class="content">#91</div>
  </div>
  <div class="board-container">
    <div class="content">#92</div>
  </div>
  <div class="board-container">
    <div class="content">#93 nice</div>
  </div>
  <div class="board-container">
    <div class="content">#94</div>
  </div>
  <div class="board-container">
    <div class="content">#95</div>
  </div>
  <div class="board-container">
    <div class="content">#96</div>
  </div>
  <div class="board-container">
    <div class="content">#97</div>
  </div>
  <div class="board-container">
    <div class="content">#98</div>
  </div>
  <div class="board-container">
    <div class="content">#99</div>
  </div>
  <div class="board-container">
    <div class="content">#100</div>
  </div>
  <div class="board-container">
    <div class="content">#101 here some stuff</div>
  </div>
  <div class="board-container">
    <div class="content">#102</div>
  </div>
  <div class="board-container">
    <div class="content">#103</div>
  </div>
  <div class="board-container">
    <div class="content">#104</div>
  </div>
  <div class="board-container">
    <div class="content">#105</div>
  </div>
  <div class="board-container">
    <div class="content">#106 more content</div>
  </div>
  <div class="board-container">
    <div class="content">#107</div>
  </div>
  <div class="board-container">
    <div class="content">#108</div>
  </div>
  <div class="board-container">
    <div class="content">#109</div>
  </div>
  <div class="board-container">
    <div class="content">#110</div>
  </div>
  <div class="board-container">
    <div class="content">#111 here too</div>
  </div>
  <div class="board-container">
    <div class="content">#112</div>
  </div>
  <div class="board-container">
    <div class="content">#113</div>
  </div>
  <div class="board-container">
    <div class="content">#114</div>
  </div>
  <div class="board-container">
    <div class="content">#115</div>
  </div>
  <div class="board-container">
    <div class="content">#116 content is cool</div>
  </div>
  <div class="board-container">
    <div class="content">#117</div>
  </div>
  <div class="board-container">
    <div class="content">#118</div>
  </div>
  <div class="board-container">
    <div class="content">#119</div>
  </div>
  <div class="board-container">
    <div class="content">#120</div>
  </div>
  <div class="board-container">
    <div class="content">#121 good stuff</div>
  </div>
  <div class="board-container">
    <div class="content">#122</div>
  </div>
  <div class="board-container">
    <div class="content">#123</div>
  </div>
  <div class="board-container">
    <div class="content">#124</div>
  </div>
  <div class="board-container">
    <div class="content">#125</div>
  </div>
  <div class="board-container">
    <div class="content">#126 don't forget about me</div>
  </div>
  <div class="board-container">
    <div class="content">#127</div>
  </div>
  <div class="board-container">
    <div class="content">#128</div>
  </div>
  <div class="board-container">
    <div class="content">#129</div>
  </div>
  <div class="board-container">
    <div class="content">#130 and me ...</div>
  </div>
  <div class="board-container">
    <div class="content">#131</div>
  </div>
  <div class="board-container">
    <div class="content">#132</div>
  </div>
  <div class="board-container">
    <div class="content">#133</div>
  </div>
  <div class="board-container">
    <div class="content">#134</div>
  </div>
  <div class="board-container">
    <div class="content">#135 third.</div>
  </div>
  <div class="board-container">
    <div class="content">#136</div>
  </div>
  <div class="board-container">
    <div class="content">#137</div>
  </div>
  <div class="board-container">
    <div class="content">#138</div>
  </div>
  <div class="board-container">
    <div class="content">#139</div>
  </div>
  <div class="board-container">
    <div class="content">#140 nice</div>
  </div>
  <div class="board-container">
    <div class="content">#141</div>
  </div>
  <div class="board-container">
    <div class="content">#142</div>
  </div>
  <div class="board-container">
    <div class="content">#143</div>
  </div>
  <div class="board-container">
    <div class="content">#144</div>
  </div>
</div>
</div>
<button class="button" data-js-flip>switch layout</button>
var trueVar = true; 
var falseVar = false; 

function checkNotNullAndTrue(someVar) {
    if (someVar != null && someVar) {
        return 1; 
    } else {
        return 0;
    }
}

答案 1 :(得分：1)

您需要复制bootstrap css的大部分内容并添加一些类前缀

我将使用简单的名称portrait和landscape代替embed-responsive和embed-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%;
}

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

在下面的例子中，我通过内联样式攻击了左边的浮动，但是如果你通过在前面添加一般模式类和模式特定前缀来处理所有网格类，你也应该传递这些设置： - ）

玩得开心！

＆＃13;
＆＃13; 
$('#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');
    }
});
＆＃13; 
.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%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<button type="button" id="thetoggle" class="btn btn-primary">Toggle mode to landscape</button>
<div class="container portrait">
  <div class="row">
    <div class="portrait-col-xs-12 landscape-col-xs-4"  style="float:left"> 
       <h1>Title foo bar baz</h1>
    </div>
    <div class="portrait-col-xs-12 landscape-col-xs-8" style="float:left">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
        </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

我想对全屏iFrame使用16by9和9by16，并可以在纵向和横向之间切换。使用Bootstrap4和SCSS只需添加

// 21/9 - 9/21
@media screen and (orientation:portrait) {
    .embed-responsive-21by9-rotating {
        padding-bottom: percentage(21 / 9); // 233.3333333333%
    }
}
@media screen and (orientation:landscape) {
    .embed-responsive-21by9-rotating {
        padding-bottom: percentage(9 / 21); // 42.8571428571%
    }
}
// 16/9 - 9/16
@media screen and (orientation:portrait) {
    .embed-responsive-16by9-rotating {
        padding-bottom: percentage(16 / 9); // 177.7777777778%
    }
}
@media screen and (orientation:landscape) {
    .embed-responsive-16by9-rotating {
        padding-bottom: percentage(9 / 16); // 56.25%
    }
}
// 4/3 - 3/4
@media screen and (orientation:portrait) {
    .embed-responsive-4by3-rotating {
        padding-bottom: percentage(4 / 3); // 133.3333333333%
    }
}
@media screen and (orientation:landscape) {
    .embed-responsive-4by3-rotating {
        padding-bottom: percentage(3 / 4); // 75%
    }
}

...并使用 embed-active- [n] by [m] -rotating 作为长宽比的类名称。

相关问题
最新问题