【发布时间】：2021-04-18 20:06:46
【问题描述】：
我正在尝试将使用 bootstrap 制作的主题放入 WordPress。我已将所有样式表排入队列，并且我的控制台没有显示任何错误。当我通过 WordPress 查看我的页面时，我的所有内容都有一个边框，并且我的带有图像的圆形圆圈现在是方形的。如何阻止 WordPress 改变这一点？
<?php
function load_stylesheets(){
wp_enqueue_style('bootstrap4', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap-grid.min.css');
wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
wp_enqueue_style('magnificpopup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css');
wp_register_style('custom', get_template_directory_uri() . '/css/bsite.css', array(), 1, 'all');
wp_enqueue_style('custom');
/*wp_register_style('custom', get_template_directory_uri() . '/custom.css', array(), 1, 'all');
wp_enqueue_style('custom');*/
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
function addjs(){
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.5.1.slim.min.js', array( 'jquery' ),'3.5.1', true );
wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js', array( 'jquery' ),'2.6.0', true );
wp_enqueue_script( 'boot4','https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', array( 'jquery' ),'1.1.0', true );
wp_enqueue_script( 'boot3','https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js', array( 'jquery' ),'4.5.3', true );
}
add_action( 'wp_enqueue_scripts', 'addjs' );
?>
<?php get_header(); ?>
<body>
<nav class="navbar navbar-expand-lg px-3" id="navBar">
<a href="#" class="navbar text-uppercase"> sites by bryan </a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#myNav"
>
<span class="navbar-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<!-- -->
<div class="collapse navbar-collapse" id="myNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a href="#navBar" class="nav-link">home</a>
</li>
<li class="nav-item">
<a href="#skills" class="nav-link">skills</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">contact</a>
</li>
</ul>
</div>
</nav>
<!-- end nav element -->
<!-- headder section -->
<header class="header" id="header">
<div class="container-fluid">
<div class="row height-max align-items-center">
<div class="col col-md-9 ml-auto text-right pr-5">
<h1 class="text-uppercase my-2 title">sites by bryan</h1>
<h3 class="text-uppercase">what can i do for you?</h3>
</div>
</div>
</div>
</header>
<!-- end headder section -->
<!-- skills section -->
<section class="skills py-5" id="skills">
<div class="container">
<!-- section title -->
<div class="row mb-5">
<div
class="col d-flex flex-wrap text-uppercase justify-content-center"
>
<h1 class="font-weight-bold align-self-center mx-1">my</h1>
<h1 class="section-title--special mx-1">skills</h1>
</div>
</div>
<!-- end of section title -->
<div class="row">
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<i class="fab fa-html5"></i>
</a>
<h6 class="text-uppercase font-weight-bold my-3">html</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
clean written code and layout that includes comments to ease the
process future updates
</p>
</div>
<!-- end of single skill -->
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<svg
width="1em"
height="1em"
viewBox="-1 0 18 18"
class="bi bi-bootstrap"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12 1H4a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3zM4 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4H4z"
/>
<path
fill-rule="evenodd"
d="M8.537 12H5.062V3.545h3.399c1.587 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.483 1.816v.1c1.143.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.888 2.396zM6.375 4.658v2.467h1.558c1.16 0 1.764-.428 1.764-1.23 0-.78-.569-1.237-1.541-1.237H6.375zm1.898 6.229H6.375V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377z"
/>
</svg>
</a>
<h6 class="text-uppercase font-weight-bold my-3">bootstrap</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
used for quick production to make scaleable sites that view on any
device
</p>
</div>
<!-- end of single skill -->
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<i class="fab fa-css3-alt"></i>
</a>
<h6 class="text-uppercase font-weight-bold my-3">css</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
written to match the layout of the page from top to bottom in
order with coments to ease the process for future updates
</p>
</div>
<!-- end of single skill -->
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<i class="fab fa-js"></i>
</a>
<h6 class="text-uppercase font-weight-bold my-3">js</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
front-end javascript to bring a site to life and give the viewer a
pleasent and smooth experience
</p>
</div>
<!-- end of single skill -->
</div>
</div>
</section>
<!-- end of skills section -->
<!-- contact section-->
<section class="contact py-5" id="contact">
<div class="container">
<div class="row">
<div class="col-8 mx-auto col-md-6">
<form>
<div class="form-group">
<input
type="email"
class="form-control contact-input p-3"
placeholder="Enter Email"
/>
</div>
<button
type="submit"
class="btn btn-outline-secondary btn-block contact-btn"
>
submit
</button>
</form>
</div>
</div>
</div>
</section>
<!-- end of contact section-->
<?php get_footer(); ?>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
:root {
--mainBlue: #40acf1;
--transparentBlue: rgba(64, 172, 241, 0.7);
--mainWhite: #ffffff;
--mainBlack: #292f36;
--mainGrey: rgb(216, 214, 214);
--mainYellow: #e3b505;
}
body {
font-family: "Roboto", sans-serif;
color: var(--mainBlack);
background: var(--mainWhite);
}
/* navbar */
.navbar {
background: var(--mainGrey);
}
.navbar-icon {
font-size: 2rem;
color: var(--mainBlue);
}
.navbar-toggler {
outline-color: var(--mainBlue) !important;
}
.nav-link {
color: var(--mainBlack);
text-transform: capitalize;
}
.nav-link:hover {
color: var(--mainBlue);
}
/* header */
.header {
clip-path: polygon(50% 0%, 100% 0, 100% 90%, 75% 100%, 25% 100%, 0 90%, 0 0);
color: var(--mainWhite);
overflow: hidden;
}
.height-max {
min-height: calc(100vh - 76px);
background: url(../img/openbridge.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
animation-name: zoom;
animation-duration: 20s;
animation-delay: 5s;
animation-iteration-count: infinite;
}
@keyframes zoom {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2) translate(-5%);
}
100% {
transform: scale(1);
}
}
/* skills section*/
.skills-icon {
font-size: 3rem;
color: var(--mainYellow);
background: var(--mainGrey);
}
.skills-icon:hover {
color: var(--mainYellow);
}
.skills-underline {
width: 4rem;
height: 0.3rem;
background: var(--mainBlue);
margin: 1rem auto;
}
/*contact section*/
.contact {
clip-path: polygon(25% 15%, 75% 15%, 100% 0, 100% 100%, 0 100%, 0 0);
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("../img/trainstation.jpg") center/cover fixed no-repeat;
}
.contact-input {
font-size: 1.5rem;
text-transform: capitalize;
background: transparent;
border-color: var(--mainYellow);
color: var(--mainYellow) !important;
}
.contact-input::placeholder {
color: var(--mainYellow);
}
.contact-input:focus {
background: transparent;
border-color: var(--mainYellow);
}
.contact-btn {
text-transform: uppercase;
color: var(--mainYellow);
border-color: var(--mainYellow);
}
.contact-btn:hover {
background: var(--mainYellow);
color: var(--mainBlack);
}
/* footer icons */
.footer {
background: var(--mainGrey);
}
.footer-icon {
font-size: 1.5rem;
text-decoration: none;
color: var(--mainYellow);
transition: all 1s ease-in-out;
}
.footer-icon:hover {
color: var(--mainBlue);
}
【问题讨论】：
-
developer.wordpress.org/reference/functions/wp_enqueue_script;第三个参数，依赖关系。风格也一样。它也必须进入你的
function.php -
另外，您显然只是在排队引导引导网格而不是整个事情@see
bootstrap-grid.min.css -
@amarinediary 你是救生员，谢谢！我不敢相信我做到了，甚至没有注意到。它现在看起来应该如此。
-
不！我也写了一个完整的答案。不要忘记接受并投票。
标签： html jquery css wordpress bootstrap-4