我在一个带有wordpress和bootstrap starter主题的小型网页上工作。我目前正在尝试做的是，在左侧构建一个徽标块，其中包含主标题和副标题以及一些svg，以使外观更好，而在右侧则是导航栏。 与此处的主题大致类似：Bootstrap layout outside of container，但有区别的是，我在项目Bootstrap 4中使用（基于WP更新）。因此，在另一主题中解释的某些类不再起作用，并且在我的情况下，新的替换类（例如，浮动而不是pull）不能正常工作。 导航框目前也位于徽标下方，但必须位于同一行，但必须较小（仅30-40px高度）。
我首先尝试了引导程序3的给定解决方案，然后解决了引导程序4的问题，但是没有任何真正的成功。
这是标题的来源。
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex flex-column w-100">
<div class="d-md-flex d-block flex-nowrap">
<div class="collapse navbar-collapse">
<ul id="navbar-section-list" class="navbar-nav mr-auto w-100">
<div id="logo" class="float-left col col-5">
<div class="row">
<div class="pl-font maintitle row">
<div class="maintitle-box p-logo">
Plackermann<br>& Söhne
</div>
<svg class="svg-logo bg-white" height="70" width="35"><polygon points="35,0 35,70 0,70" style=""></polygon></svg>
<svg class="svg-logo" height="70" width="35"><polygon points="0,0 35,0 0,70" style=""></polygon></svg>
</div>
</div>
<div class="row">
<div class="pl-font subtitle row">
<div class="subtitle-box p-logo">
Ihr Partner für Innen & Außen
</div>
<svg class="svg-logo" height="20" width="10"><polygon points="0,0 10,0 0,20" style=""></polygon></svg>
</div>
</div>
</div>
</ul>
<ul class="navbar-nav ">
<div id="main-nav" class="collapse navbar-collapse justify-content-end pl-font">
<ul id="menu-main" class="navbar-nav">
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-21 nav-item"><a title="Start" href="http://plackermann.de" class="nav-link">Start</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87 nav-item"><a title="Leistungen" href="http://plackermann.de/leistungen/" class="nav-link">Leistungen</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90 nav-item"><a title="Referenzen" href="http://plackermann.de/referenzen/" class="nav-link">Referenzen</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86 nav-item"><a title="Kontakt" href="http://plackermann.de/kontakt/" class="nav-link">Kontakt</a></li>
</ul>
</div>
</ul>
</div>
</div>
<small id="navbar-node-info"></small>
</div>
</nav>
<div id="content" class="site-content">
<div class="container">
<div class="row">
<section id="primary" class="content-area col-sm-12 col-lg-8">
<main id="main" class="site-main" role="main">
<article id="post-26" class="post-26 page type-page status-publish hentry">
<header class="entry-header">
<h1 class="entry-title">Start</h1> </header><!-- .entry-header -->
<div class="entry-content">
<div data-elementor-type="post" data-elementor-id="26" class="elementor elementor-26" data-elementor-settings="[]">
<div class="elementor-inner">
<div class="elementor-section-wrap">
<section class="elementor-element elementor-element-43e1c32 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" data-id="43e1c32" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div class="elementor-element elementor-element-16e79d7 elementor-column elementor-col-100 elementor-top-column" data-id="16e79d7" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-87ddffa elementor-widget elementor-widget-image-carousel" data-id="87ddffa" data-element_type="widget" data-settings="{"navigation":"both","pause_on_hover":"yes","autoplay":"yes","autoplay_speed":5000,"infinite":"yes","speed":500,"direction":"ltr"}" data-widget_type="image-carousel.default">
<div class="elementor-widget-container">
<div class="elementor-image-carousel-wrapper elementor-slick-slider" dir="ltr">
<div class="elementor-image-carousel slick-arrows-inside slick-dots-outside slick-initialized slick-slider slick-dotted"><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;">Previous</button>
<div class="slick-list draggable"><div class="slick-track" style="opacity: 1; width: 3081px; transform: translate3d(-1185px, 0px, 0px);"><div class="slick-slide slick-cloned" data-slick-index="-3" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide4-150x150.jpg" alt="Slide4"></figure></div><div class="slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide3-150x150.png" alt="Slide3"></figure></div><div class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide5-150x150.png" alt="Slide5"></figure></div><div class="slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide00" aria-describedby="slick-slide-control00" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide1-150x150.png" alt="Slide1"></figure></div><div class="slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide01" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide2-150x150.png" alt="Slide2"></figure></div><div class="slick-slide slick-current slick-active" data-slick-index="2" aria-hidden="false" tabindex="0" role="tabpanel" id="slick-slide02" aria-describedby="slick-slide-control01" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide4-150x150.jpg" alt="Slide4"></figure></div><div class="slick-slide slick-active" data-slick-index="3" aria-hidden="false" tabindex="0" role="tabpanel" id="slick-slide03" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide3-150x150.png" alt="Slide3"></figure></div><div class="slick-slide slick-active" data-slick-index="4" aria-hidden="false" tabindex="0" role="tabpanel" id="slick-slide04" aria-describedby="slick-slide-control02" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide5-150x150.png" alt="Slide5"></figure></div><div class="slick-slide slick-cloned" data-slick-index="5" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide1-150x150.png" alt="Slide1"></figure></div><div class="slick-slide slick-cloned" data-slick-index="6" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide2-150x150.png" alt="Slide2"></figure></div><div class="slick-slide slick-cloned" data-slick-index="7" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide4-150x150.jpg" alt="Slide4"></figure></div><div class="slick-slide slick-cloned" data-slick-index="8" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide3-150x150.png" alt="Slide3"></figure></div><div class="slick-slide slick-cloned" data-slick-index="9" aria-hidden="true" tabindex="-1" style="width: 237px;"><figure class="slick-slide-inner"><img class="slick-slide-image" src="http://plackermann.de/wp-content/uploads/2019/05/Slide5-150x150.png" alt="Slide5"></figure></div></div></div> <button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: block;">Next</button><ul class="slick-dots" style="display: block;" role="tablist"><li class="" role="presentation"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 2" tabindex="-1">1</button></li><li role="presentation" class="slick-active"><button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide02" aria-label="2 of 2" tabindex="-1">2</button></li><li role="presentation" class=""><button type="button" role="tab" id="slick-slide-control02" aria-controls="slick-slide04" aria-label="3 of 2" tabindex="0" aria-selected="true">3</button></li></ul></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="elementor-element elementor-element-443b894 elementor-section-full_width elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" data-id="443b894" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div class="elementor-element elementor-element-b2d7feb elementor-column elementor-col-66 elementor-top-column" data-id="b2d7feb" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-dc0a86e elementor-widget elementor-widget-text-editor" data-id="dc0a86e" data-element_type="widget" data-widget_type="text-editor.default">
<div class="elementor-widget-container">
<div class="elementor-text-editor elementor-clearfix"><!-- wp:paragraph -->
<p><strong>Willkommen beim Familienbetrieb Plackermann & Söhne in Wenden!</strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong>Sie planen eine Neugestaltung Ihres Gartens oder eine Renovierung im
Haus?</strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong>Wir sorgen dafür das es gut wird, denn wir sind</strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong>Ihr Partner für Innen & Außen</strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong>Ihr „Plackermann“ Sven Kasinowski (Inhaber)</strong></p>
<!-- /wp:paragraph --></div>
</div>
</div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-37be6ea elementor-column elementor-col-33 elementor-top-column" data-id="37be6ea" data-element_type="column">
<div class="elementor-column-wrap">
<div class="elementor-widget-wrap">
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="edit-link"><a class="post-edit-link" href="http://plackermann.de/wp-admin/post.php?post=26&action=edit">Edit <span class="screen-reader-text">"Start"</span></a></span> </footer><!-- .entry-footer -->
</article><!-- #post-## -->
</main><!-- #main -->
</section><!-- #primary -->
</div><!-- .row -->
</div><!-- .container -->
</div><!-- #content -->
<footer id="colophon" class="site-footer navbar-light" role="contentinfo">
<div class="container pt-3 pb-3">
<div class="site-info">
© 2019 <a href="http://plackermann.de">Plackermann & Söhne</a> <span class="sep"> | </span>
<a class="credits" href="https://afterimagedesigns.com/wp-bootstrap-starter/" target="_blank" title="WordPress Technical Support" alt="Bootstrap WordPress Theme">Bootstrap WordPress Theme</a>
</div><!-- close .site-info -->
</div>
</footer><!-- #colophon -->
</div>
这里是指向已保存版本的链接，您可以在其中查看CSS。 http://kflt.de/tmp/plackermann/plackermann.html
我想要达到的正是示例中显示的内容。 Logo div从屏幕边缘开始，徽标文本self从容器起点开始，导航在灰色框的右侧，容器末端。
我希望有人能帮助我或给我一些提示。
谢谢。
更新： 现在，Irin修复了一些部分，谢谢。 我有两个问题： 徽标文字应该从content-conatiner起点开始（很抱歉，在->代码更新之前，我错过了该信息） 而下方的这个“丑陋”灰色条就是导航栏。因此问题是，是否可以将导航放置在看起来像这样的较小容器中？ Current look with implemented improvement
