友好的网络专家，
我正在学习编写网站六个月，并有一个大项目到期，但标题和subnav让事情变得一团糟，看起来根本不对。徽标应位于带有阴影和半径角的框中的导航菜单上方，子菜单在激活子菜单时应以不同的颜色弹出。现在，导航顶部和下方的边距也没有出现。
我是一个新秀，所以任何建议或编码帮助都会非常感激！
See Header example screenshot, what it should look like vs what it is appearing like.
HTML
<div id="headerWrap" class="hidden-xs">
</div>
<div class="headerWrap hidden-xs">
<div class="headerWrapInner">
<div class="container container-smooth">
<div class="row">
<div class="col-sm-3">
<div id="headerLogo">
<a href="img">
<img src="img" style="width:220px;height:auto;">
</a>
</div>
</div>
<div class="col-sm-9">
<ul>
<nav role="navigation">
<div class="headerWrap-mainNavigation">
<ul class="nav navbar-nav">
<li id="menu-item-259" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-226 current_page_item active menu-item-259 active"><a href="visit">Visit</a></li>
<li id="menu-item-1040" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1040"><a href="memberships">Memberships</a></li>
<li id="menu-item-261" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-261"><a href="exhibits">Exhibits</a></li>
<li id="menu-item-1134" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1134"><a href="parties-events">Parties/Events</a></li>
<li id="menu-item-264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-264"><a href="preschool">Preschool</a></li>
<li id="menu-item-1157" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1157"><a href="contact-us">Contact Us</a></li>
</ul>
<div class="headerWrap-subnav">
<div class="container container-smooth">
<div class="row">
<div class="col-sm-12">
<div id="informationSubmenu" style="padding-left:0px;">
<ul>
<li id="menu-item-427" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-427"><a href="visit/museum-store/">Museum Store</a></li>
<li id="menu-item-428" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-428"><a href="visit/faqs/">FAQs</a></li>
<li id="menu-item-1113" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1113"><a href="category/blog/">Blog</a></li>
<li id="menu-item-1109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1109"><a href="visit/our-story/">Our Story</a></li>
</ul>
</div>
</div>
</div>
</div>
CSS
@media (min-width: 768px) {
.lead { font-size: 24px; }
}
small,
.small { font-size: 75%; }
mark,
.mark { background-color: #fcf8e3; padding: .2em; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
.text-lowercase { text-transform: lowercase; }
.text-uppercase,
.initialism { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-muted { color: #777777; }
.text-primary { color: #337ab7; }
a.text-primary:hover,
a.text-primary:focus { color: #286090; }
.text-success { color: #3c763d; }
a.text-success:hover,
a.text-success:focus { color: #2b542c; }
.text-info { color: #31708f; }
a.text-info:hover,
a.text-info:focus { color: #245269; }
.text-warning { color: #8a6d3b; }
a.text-warning:hover,
a.text-warning:focus { color: #66512c; }
.text-danger { color: #a94442; }
a.text-danger:hover,
a.text-danger:focus { color: #843534; }
.bg-primary { color: #fff; }
.bg-primary { background-color: #337ab7; }
a.bg-primary:hover,
a.bg-primary:focus { background-color: #286090; }
.bg-success { background-color: #dff0d8; }
a.bg-success:hover,
a.bg-success:focus { background-color: #c1e2b3; }
.bg-info { background-color: #d9edf7; }
a.bg-info:hover,
a.bg-info:focus { background-color: #afd9ee; }
.bg-warning { background-color: #fcf8e3; }
a.bg-warning:hover,
a.bg-warning:focus { background-color: #f7ecb5; }
.bg-danger { background-color: #f2dede; }
a.bg-danger:hover,
a.bg-danger:focus { background-color: #e4b9b9; }
.page-header { padding-bottom: 10px; margin: 44px 0 22px; border-bottom: 1px solid #eeeeee; }
ul,
ol { margin-top: 0; margin-bottom: 11px; }
ul ul,
ul ol,
ol ul,
ol ol { margin-bottom: 0; }
.list-unstyled { padding-left: 0; list-style: none; }
.list-inline { padding-left: 0; list-style: none; margin-left: -5px; }
.list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; }
dl { margin-top: 0; margin-bottom: 22px; }
dt,
dd { line-height: 1.42857; }
dt { font-weight: bold; }
dd { margin-left: 0; }
.dl-horizontal dd:before,
.dl-horizontal dd:after { content: " "; display: table; }
.dl-horizontal dd:after { clear: both; }
@media (min-width: 768px) {
.dl-horizontal dt { float: left; width: 160px; clear: left; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-horizontal dd { margin-left: 180px; }
}
abbr[title],
abbr[data-original-title] { cursor: help; border-bottom: 1px dotted #777777; }
.initialism { font-size: 90%; }
blockquote { padding: 11px 22px; margin: 0 0 22px; font-size: 20px; border-left: 5px solid #eeeeee; }
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child { margin-bottom: 0; }
blockquote footer,
blockquote small,
blockquote .small { display: block; font-size: 80%; line-height: 1.42857; color: #777777; }
blockquote footer:before,
blockquote small:before,
blockquote .small:before { content: '\2014 \00A0'; }
.blockquote-reverse,
blockquote.pull-right { padding-right: 15px; padding-left: 0; border-right: 5px solid #eeeeee; border-left: 0; text-align: right; }
.blockquote-reverse footer:before,
.blockquote-reverse small:before,
.blockquote-reverse .small:before,
blockquote.pull-right footer:before,
blockquote.pull-right small:before,
blockquote.pull-right .small:before { content: ''; }
.blockquote-reverse footer:after,
.blockquote-reverse small:after,
.blockquote-reverse .small:after,
blockquote.pull-right footer:after,
blockquote.pull-right small:after,
blockquote.pull-right .small:after { content: '\00A0 \2014'; }
address { margin-bottom: 22px; font-style: normal; line-height: 1.42857; }
code,
kbd,
pre,
samp { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; }
code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; }
kbd { padding: 2px 4px; font-size: 90%; color: #fff; background-color: #333; border-radius: 3px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); }
kbd kbd { padding: 0; font-size: 100%; font-weight: bold; box-shadow: none; }
pre { display: block; padding: 10.5px; margin: 0 0 11px; font-size: 15px; line-height: 1.42857; word-break: break-all; word-wrap: break-word; color: #333333; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; }
pre code { padding: 0; font-size: inherit; color: inherit; white-space: pre-wrap; background-color: transparent; border-radius: 0; }
.pre-scrollable { max-height: 340px; overflow-y: scroll; }
答案 0 :(得分：0)
从它看起来，您只需要为图像添加背景颜色，将其与您想要的位置对齐并添加底部边框半径。
我在这个JSfiddle中完成了以下所有操作，这可以帮助您了解您需要做什么：
显然，你用自己的颜色和徽标替换它。
https://jsfiddle.net/fbbq58t5/
.image {
background-color: #fff;
width: 325px;
height: 240px;
display: block;
margin: 0 auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
如果有帮助，请投票赞成！