我的自举网格对齐存在一些问题。
我有三个主要专栏。一个用于左侧栏, 一个用于博客帖子, 另一个用于右侧栏。
我正在尝试在左侧和右侧边栏的顶部放置一个黄色栏。我已经在左侧栏中成功添加了一个, 但是在右侧栏中, 我无法使其具有固定的位置。每当我缩小或放大时, 它就会消失, 这与左侧边栏不同。
这是带有侧边栏的index.php代码:
<
div class="row">
<
div class="col-md-5">
<
/div>
<
div class="col-md-1">
<
/div>
<
div class="col-md-4">
<
/div>
<
div id="maineverything">
<
div class="col-md-3">
<
?php get_search_form();
?>
<
?php get_sidebar('1');
?>
<
/div>
<
div class="col-md-7 blog-main">
<
div class="blogtitle">
<
p>
PAKU SQUAD <
span class="subheader1">
BLOG<
/span>
<
/p>
<
hr>
<
/div>
<
?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;
?>
<
nav>
<
ul class="pager">
<
li>
<
?php next_posts_link( 'Older Posts >
>
>
' );
?>
<
/li>
<
li>
<
?php previous_posts_link( '<
<
<
Newer Posts' );
?>
<
/li>
<
/ul>
<
/nav>
<
?php
endif;
?>
<
/div>
<
!-- /.blog-main -->
<
div class="col-md-2">
<
?php get_sidebar('2');
?>
<
/div>
<
/div>
<
/div>
<
!-- /.row -->
这是我的引导网格的css代码:
/* Column Codes */
.row {
padding: 100px;
}
#maineverything {
padding-left: 150px;
display: inline-block;
max-width: 100%;
width: 100%;
height: 100%;
}
.col-md-2 {
border-bottom: 2px solid #a7a7a7;
max-height: 100%;
height: 1920px;
width: 250px;
background-color: #f0f0f0;
}
.col-md-3 {
border-bottom: 2px solid #a7a7a7;
max-height: 100%;
height: 1920px;
width: 250px;
background-color: #f0f0f0;
}
.col-md-4 {
margin-right: 47px;
float:right;
max-width:100%;
width: 250px;
height: 50px;
background-color: #feb300;
}
.col-md-5 {
padding-top: 50px;
max-width:100%;
margin-left: 150px;
width: 250px;
height: 30px;
background-color: #feb300;
}
.col-md-7 {
max-height: 100%;
height: 1920px;
border-bottom: 2px solid #a7a7a7;
}
#1【缩放时的bootstrap网格对齐问题】没有正确的引导HTML结构, 你需要在容器div中添加行, 并在行中添加col-md- *。请参考https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp, 默认情况下应用引导宽度, 因此需要应用宽度, 填充和边距, 我通过添加容器和删除不必要的CSS更改了HTML结构… 现在检查
/* Column Codes */.row {padding:0px 100px;
}#maineverything {display: inline-block;
max-width: 100%;
width: 100%;
height: 100%;
}.col-md-2 {border-bottom: 2px solid #a7a7a7;
background-color: #f0f0f0;
}.col-md-3.bgyellow{height: 30px;
background-color: #feb300;
}.bgyellow2{height: 50px;
background-color: #feb300;
}.col-md-3 {background-color: #f0f0f0;
}.col-md-4 {height: 50px;
background-color: #feb300;
}.col-md-5 {height: 30px;
background-color: #feb300;
}.col-md-7 {border-bottom: 2px solid #a7a7a7;
}
<
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
<
/script>
<
script src="http://img.readke.com/220529/1F35UR5-1.jpg">
<
/script>
<
div class="container">
<
div class="row">
<
div class="col-md-3 col-xs-3 bgyellow">
<
/div>
<
div class="col-md-7 col-xs-7">
<
/div>
<
div class="col-md-2 col-xs-2 bgyellow2">
<
/div>
<
/div>
<
/div>
<
div id="maineverything">
<
div class="container">
<
div class="row">
<
div class="col-md-3 col-xs-3">
<
?php get_search_form();
?>
<
?php get_sidebar('1');
?>
<
/div>
<
div class="col-md-7 col-xs-7 blog-main">
<
div class="blogtitle">
<
p>
PAKU SQUAD <
span class="subheader1">
BLOG<
/span>
<
/p>
<
hr>
<
?php if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;
?>
<
nav>
<
ul class="pager">
<
li>
<
?php next_posts_link( 'Older Posts >
>
>
' );
?>
<
/li>
<
li>
<
?php previous_posts_link( '<
<
<
Newer Posts' );
?>
<
/li>
<
/ul>
<
/nav>
<
?phpendif;
?>
<
/div>
<
/div>
<
!-- /.blog-main -->
<
div class="col-md-2 col-xs-2">
<
?php get_sidebar('2');
?>
<
/div>
<
/div>
<
!-- /.row -->
<
/div>
<
/div>
推荐阅读
- bootstrap字形在WordPress主题中不起作用
- 使用the_post_thumbnail()图像引导4张卡片可以通过wordpress拉伸以适合自己()
- Avada在菜单项之间添加空格
- 输入凭据后空白wp-login.php页面
- 桌面和移动设备上的背景图片定位
- 更新帖子时自动重定向到wp-admin/post
- Avada WordPress主题(容器背景不起作用)
- 将CSS样式应用于悬停时访问的链接
- #yyds干货盘点# go template模板语法