Question

所以我在bootstrap中有三列，如下所示

移动：

[A][C]
[B]

桌面：

<div class="container">  
  <div class="row">
     <div class="content1 col-xs-12 col-md-6">
        A
       <div class="row">
          <div class="content2 col-xs-12 col-md-12 hidden-xs hidden-sm">
             B
          </div>   
       </div>
     </div>     
  <div class="content3 col-xs-12 col-md-6">
        C
  </div>
  <div class="content2 col-xs-12 col-md-12 hidden-md hidden-lg">
       B
  </div>          
</div>

以下是我的代码：

server<-function(input,output,session) {
observeEvent(input$do, {
con <- dbConnect(odbc::odbc(), "$$$$", uid = "$$$$", pwd = "$$$$")
result<-dbSendQuery(con,"select * from table_name")
data.frame<-dbFetch(result)
View(data.frame)

我已经使用隐藏类实现了它，但是有没有更好的方法来使用推/拉类呢？

PS：[C]我有一个固定的高度，比方说50vh。

Answer 1

您不需要使用嵌套，推/拉或隐藏类。在较大的md宽度上使用50％宽度的列。

https://www.codeply.com/go/3APQ7tHCgS

<div class="container">
    <div class="row">
        <div class="content1 col-md-6">
            A
        </div>
        <div class="content3 col-md-6">
            C
        </div>
        <div class="content2 col-md-12">
            B
        </div>
    </div>
</div>

另外，请注意，当使用较大的网格列时，Bootstrap 3中会隐含col-xs-12，因此标记中不需要它。

相关：How do I change Bootstrap 3 div column order

Answer 2

试试这个fiddle ...

＆＃13;

.content1{height:50vh !important;}

＆＃13;

<div class="container">  
  <div class="content1 col-xs-12 col-md-6">
    A
  </div>     
  <div class="content3 col-xs-12 col-md-6">
    C
  </div>
  <div class="content2 col-xs-12 col-md-12">
    B
  </div>          
</div>

＆＃13;

我认为它适用于两种尺寸（移动和桌面）。

重新排序引导列（嵌套）

2 个答案: