Question

我想在Bootstrap中使用这种布局：

 ___  ______________  ___
| 1 ||  2  2  2  2  || 4 |
| 1 ||  2  2  2  2  || 4 |
| 1 ||__2__2__2__2__|| 4 |
| 1 | ______________ | 4 |
| 1 ||  3  3  3  3  || 4 |
| 1 ||  3  3  3  3  || 4 |
|_1_||__3__3__3__3__||_4_|

我希望它折叠成：

 ____________________
|  2  2  2  2  2  2  |
|  2  2  2  2  2  2  |
|__2__2__2__2__2__2__|
 _____  _____  ______
| 1  1||3  3 || 4  4 |
| 1  1||3  3 || 4  4 |
|_1__1||3__3_||_4__4_|

...我很困惑！有什么想法吗？

谢谢！

Answer 1

这是仅使用Bootstrap帮助程序类即可实现的简单方法：

public function getSearch(Request $request) { 
    $keyword = $request->input('keyword'); 
    $categories = Category::all(); 
    if( $keyword != ""){ 
        return view('store.search')->with('posts', Post::where('title', 'LIKE', '%'.$keyword.'%')->get()) 
            ->with('keyword', $keyword) 
            ->with('categories', $categories); 
     } 
     else { 
         return redirect('/') ; 
     } 
}

/* you obviously don't need this, it's just for this example... */
.row {
  font-size: 6rem;
}
[class^="col-"] {
  background-color: #eee;
  border: 1px solid #fff;
  border-left-color: transparent;
  border-top-color: transparent;
}

注意：这会根据Bootstrap的<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container d-md-none d-lg-none"> <div class="row"> <div class="col-12"> <div class="d-flex justify-content-around"> <div>2</div> <div>2</div> <div>2</div> </div> </div> </div> <div class="row"> <div class="col-4"> <div class="text-center">1</div> </div> <div class="col-4"> <div class="text-center">3</div> </div> <div class="col-4"> <div class="text-center">4</div> </div> </div> </div> <div class="container d-none d-md-block d-lg-block"> <div class="row"> <div class="col-2"> <div class="text-center">1</div> <div class="text-center">1</div> </div> <div class="col-8"> <div class="row"> <div class="col-12"> <div class="text-center">2</div> </div> <div class="col-12"> <div class="text-center">3</div> </div> </div> </div> <div class="col-2"> <div class="text-center">4</div> <div class="text-center">4</div> </div> </div> </div>实用程序有效地复制内容并针对每个屏幕宽度显示正确的布局。

如果您的内容正在管理用户交互，涉及多步表单完成或管理任何类型的状态，则您可能希望使用为此目的设计的更高级的JavaScript模式。

Bootstrap将两行宽的列折叠成一行

1 个答案: