logo标签列表

Bootstrap响应式9:16

jquerycsstwitter-bootstrap-3
6
我正在尝试提供一个16x9的“绘图空间”，但我希望用户能够选择纵向或横向方向。我已经使用了class="embed-responsive embed-responsive-16by9"。是否有一种简单的方法可以使用CSS进行更改？请注意，我将在这些容器中添加divs。它们在16x9容器内的位置应该与其方向相关，因为我希望保存用户的绘图空间以便重新创建它。
为什么不使用画布并以这种方式定义尺寸？为什么要使用Bootstrap网格系统？在这个应用程序中没有意义。 - serraosays
我的要求是使用Bootstrap，因为我没有时间在画布元素周围编写库，而且我们已经在网站的其他200多个页面上使用了Bootstrap、Jquery和Jquery UI。 - Pastor Bones
嗯，那么您可能想要一个16:9的容器，由JS来操纵以进行纵向/横向调整？你能勾画出显示这个布局的草图吗？这将会很有帮助。 - serraosays
3个回答
4

我希望能够使用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%
    }
}

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

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

当然，您需要对与网格系统相关的所有类执行此操作。
在下面的示例中，我通过内联样式破解了向左浮动，但是如果您通过在一般模式类和特定模式前缀中添加前缀来处理所有网格类，则应该传递这些设置。 :-)
玩得开心！ 

$('#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
我做了什么：
我使用flexbox创建了一个网格，可以通过简单的js操作和一个button更改orientation。这个解决方案除了button之外不涉及bootstrap，只使用css和html。

解决方案：
你可以在jsfiddle.net上查看

注：
  • 由于采用了 flexbox，因此它具有响应式设计。您可以调整元素的大小，也可以添加一些限制，例如 max-width、max-height 和 overflow: auto。
  • 背景颜色仅用于演示目的。
  • '实际'内容包含在两个 div 中。第一个用于 大小和边距。在内部 div 中，您可以根据需要放置 用户内容。
  • 如果您不希望每个 容器 占用相同的大小，则可以将内部 div 的 width/height 设置为 auto，以使内容占用尽可能多的空间。

我希望这是你想要的。如果不是，请提供更多细节，以便我可以相应地调整我的解决方案。

编辑：
这样更好吗？使用 Bootstrap 更新版本

$('[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>

我曾经请求过一个Bootstrap解决方案。虽然谢谢你的尝试 :) - Pastor Bones
1
@PastorBones 把整个组件都包装到一个鬼畜的Bootstrap网格中...问题出在哪里？你的问题缺乏信息，除了一些想法之外什么也没有提供。我告诉过你，你可以告诉我你需要什么 - 虽然我不能读懂你的心思。画个图或提供一些有用的信息（如标记）或详细的需求目录来说明你的情况。 - F. Müller
@PastorBones，我已经更新了我的解决方案。现在这样好些了吗？ - F. Müller
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接