文章/答案/技术大牛

发布

社区首页 >问答首页 >引导响应9by 16

问引导响应9by 16
EN

Stack Overflow用户

提问于 2016-03-10 14:23:34

回答 3查看 1.7K关注 0票数 6

我试图提供一个‘绘画空间’，即16x9，但我希望用户能够选择肖像或景观方向。我已经在使用class="embed-responsive embed-responsive-16by9"了。是否有一种使用CSS进行更改的简单方法？

编辑

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

jquery

css

twitter-bootstrap-3

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-03-18 08:51:40

您需要复制引导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%;
}

当然，您必须这样做，所有与网格系统相关的类都必须这样做。

在下面的示例中，我黑进了内联样式留下的浮点数，但是如果您以通用模式类和模式特定前缀作为前缀来处理所有网格类，您也应该传递这些设置:-)

玩得开心!

$('#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');
    }
});

.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%;
}

<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>

票数 1

Stack Overflow用户

发布于 2018-11-12 23:08:37

我想使用16by9和9by16的全屏iFrames，有可能在纵向和景观之间切换。使用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%
    }
}

...and使用嵌入式响应-nbym旋转作为高宽比的类名.

票数 4

Stack Overflow用户

发布于 2016-03-16 21:54:13

我所做的：

我用flexbox创建了一个网格，允许您使用简单的js操作和button更改orientation。该解决方案除了bootstrap之外，不涉及button、its、its、css和html。

解决方案：

您可以查看一下: jsfiddle.net

备注：

因为它是flexbox，所以它附带了一个responsive design。你可以围绕着精灵的大小来玩，也可以在max-width、max-height和overflow: auto上添加一些限制。
背景颜色仅用于演示。
“实际”内容被包装成2个div。第一个用于sizing and margins。在内部div中，您可以随心所欲地放置user content。
如果您不希望每个container具有相同的大小，您只需将内部div的width/height设置为auto，就可以让内容占用它所需的空间。

我希望这就是你想要的。如果没有，请向您的问题中添加更多细节，我可以相应地调整我的解决方案。

编辑：

这更像吗？带引导的更新版本

$('[data-js-flip]').on('click', function() {
  $('[data-js-board]').toggleClass('flipped');
})

* {
  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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35919107

复制

相似问题

问引导响应9by 16
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导响应9by 16EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导响应9by 16
EN