gpt4 book ai didi

javascript - 如何设置侧边栏的对齐方式

转载 作者:行者123 更新时间:2023-11-28 02:20:08 27 4
gpt4 key购买 nike

我附上我的代码和输出 View 。任何人都可以帮助我如何设置侧边栏对齐方式。提前致谢。

侧边栏.blade.php

<!-- Sidebar Widgets Column -->
<div class="col-md-4 container">
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>

<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
<a href="#">Laravel</a>
</li>
<li>
<a href="#">PHP</a>
</li>
<li>
<a href="#">HTML</a>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">Web Design</a>
</li>
</ul>
</div>
</div>
</div>
</div>

<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Stats</h5>
<div class="card-body">
You can put anything
</div>
</div>
</div>

Master.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>myblog</title>

<!-- Custom styles for this template -->
<link href="/public/css/blog-post.css" rel="stylesheet">

</head>

<body style="background-color: #e9ecef;">

@include('partials.nav')

@include('partials.jumbotron')

<!-- Page Content -->
<div class="container">

<div class="row">

@yield('content')

</div>
<!-- /.row -->

@include('partials.sidebar')

</div>
<!-- /.container -->

@include('partials.footer')

</body>

<style type="text/css">

.pagination {
margin-bottom: 20px;
padding-right: 500px;
width: 300px;
height: 23px;
font-size: 25px;
color: red;
padding-left: 500px;
}

</style>

</html>

输出:

Output

最佳答案

你的 sidebar<div class="row"> 的 sibling .相反,它需要是一个 child 。

此外,不要使用 container在你的课上 col-md-4

<div class="row">
@include('partials.sidebar')

@yield('content')
</div>

当然,这将假定您的 content总是有一个 <div class="col-md-8">在上面赞美 <div class="col-md-4>"在你的侧边栏上。

关于javascript - 如何设置侧边栏的对齐方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48256613/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com