我很久以前雇了一个人去做我的网站，但从来没有真正适当地调整窗口大小。我试图让他解决这个问题，但过去5个月没有发生任何事情（他说他现在太忙了）。我知道在网站上编码的基础知识，所以我觉得在这里问这不会有什么害处，因为我知道你是一个喜欢互相帮助的好社区。相关网站是http://dronebutikken.dk/
现在基本上有两件事情真的很烦人。搜索栏位于徽标下方，购物车在调整到大约一半时会跳到第二行。我想要的是搜索栏和购物车保持在同一行的右侧。我意识到菜单栏太宽了，所以当你调整窗口大小时可以调整文本大小吗？如果是这样的话？
下面是style.css，网站上的实际内容已缩小，我在这里和那里改变了一些内容，但我不记得在菜单或搜索栏中更改了任何内容/ logo，所以它应该是相同的，我唯一改变的是字体（将其改为Open Sans）。我将它附在下面，这样您就可以使用ctrl / cmd + f获取相关代码。
我曾经尝试过几次，但我还没有成功地做到这一点，并且可能会吓跑一些客户，因为网页不断变化。
的style.css
/*
PALETTE:
navy basic : #434a54;
navy light : #565c65;
navy dark : #363b43;
grey basic : #dbe3e8;
grey light : #edf0f2;edf0f2
grey dark : #a7b7c1;
red basic : #e22a40;
red light : #f14a5e;
red dark : #d5041d;
green basic : #2ecc71;
green light : #6ddb9c;
green dark : #29b765;
*/
/* BASIC */
html {
position: relative;
min-height: 100%;
overflow-x: hidden;
}
/* TYPOGRAPHY */
body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 400;
margin-bottom: 200px;
color: #000000;
}
@media(max-width:767px){
body {
margin-bottom: 370px;
margin-top: 55px;
}
body.no-menu {
margin-top: 0;
}
}
#top-nav, body > footer {
font-size: 0.85em;
}
h1 {
font-size: 35px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 18px;
}
/* HEADER */
#top-nav {
min-height: 40px;
}
#top-nav li > a {
padding-top: 10px;
padding-bottom: 10px;
}
#top-nav .navbar-text {
margin-bottom: 10px;
margin-top: 10px;
}
.form-search {
margin-top: 40px;
}
.form-search input {
padding: 10px 20px;
border: 0;
}
.form-search .search-wrap {
border: 3px solid #edf0f2;
border-radius: 2px;
}
.form-search > .input-append {
padding: 0;
}
.search-button {
padding: 2px 15px;
margin-top: -4px;
border-radius: 0 2px 2px 0;
margin-left: 0px;
background: #fff;
}
.search-button:hover {
background: #fff;
}
.search-button i {
font-size: 25px;
color: #dbe3e8;
}
.search-button:hover i {
font-size: 25px;
color: #a7b7c1;
}
#main-nav {
margin-top: 20px;
margin-bottom: 0;
border-radius: 2px;
border: none;
}
#main-nav .home > a {
padding-top: 15px;
padding-bottom: 0;
}
#main-nav .home > a > i {
font-size: 30px;
}
.navbar-nav.navbar-right:last-child {
margin-right: 0;
}
.nav-cart li > a {
font-weight: 300;
}
.nav-cart i {
font-size: 30px;
position: relative;
float: right;
}
.mega-dropdown i {
position: relative;
top: 1px;
font-weight: bold;
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
border-radius: 2px;
background: #edf0f2;
}
.mega-dropdown-menu:before, .nav-cart-menu:before {
position: absolute;
top: -7px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.mega-dropdown-menu:after, .nav-cart-menu:after {
position: absolute;
top: -6px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
.mega-dropdown-menu:before {
left: 159px;
}
.mega-dropdown-menu:after {
left: 160px;
}
.nav-cart-menu:before {
right: 23px;
}
.nav-cart-menu:after {
right: 24px;
}
.mega-dropdown-menu div, .mega-dropdown-menu div > li {
margin: 0;
padding: 0;
}
.mega-dropdown-menu div > li {
padding: 0;
}
.mega-dropdown-menu div > li > ul, .nav-cart-menu li > ul {
padding: 0 10px;
}
.mega-dropdown-menu div > li:first-child, .mega-dropdown-menu div > li:last-child {
padding-left: 0;
}
.mega-dropdown-menu div > li:nth-child(2) > ul {
border-right: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
}
.mega-dropdown-menu div > li:last-child > ul {
padding-top: 15px;
border-top: 1px solid #dfdfdf;
}
#preview {
border-left: 1px solid #dfdfdf;
padding: 0 10px;
margin: 0;
}
#preview h3 {
font-size: 16px;
font-weight: bold;
}
@media (min-width: @screen-md-min) {
#preview {
display: none;
}
}
.mega-dropdown-menu div > li > ul > li, .nav-cart-menu li > ul > li {
list-style: none;
}
.mega-dropdown-menu div > li > ul > li > a, .nav-cart-menu li > ul > li > a {
display: block;
padding: 3px 0;
clear: both;
font-size: 16px;
font-weight: normal;
line-height: 1.428571429;
color: #565c65;
white-space: normal;
}
.mega-dropdown-menu div > li ul > li > a:hover, .mega-dropdown-menu div > li ul > li > a:focus {
text-decoration: none;
color: #444;
background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header, .nav-cart-menu .dropdown-header, .xs-search-widget-menu .dropdown-header {
color: #565c65;
font-size: 18px;
font-weight: bold;
padding: 0;
}
.mega-dropdown-menu form {
margin: 3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}
.nav-cart {
position: static !important;
}
.nav-cart-menu {
padding: 20px 0px;
width: 50%;
box-shadow: none;
-webkit-box-shadow: none;
border-radius: 2px;
background: #fafafa;
}
@media(max-width:767px){
body {margin-top: 70px;}
.brand {clear: both;}
.brand a {
text-align: center;
display: block;
margin-bottom: 10px;
}
#main-nav {
position: absolute;
width: 100%;
top: 0;
margin: 0;
left: 0;
z-index: 9999;
border-radius: 0;
}
#main-nav .navbar-nav {
margin-top: 0;
margin-bottom: 0;
}
.xs-cart-widget {
display: inline-block !important;
text-align: right;
float: right;
}
.home, .mega-dropdown, li.contact {
float: left;
}
#main-nav > .navbar-left {
padding: 0;
margin: 0
}
#main-nav > .navbar-left > li, li.contact {
display: inline-block;
}
#main-nav > .navbar-left > li.home, li.contact; {
height: 51px;
}
#main-nav > .navbar-left > li > a {
line-height: 51px;
height: 51px;
padding: 0 15px;
}
.navbar-nav .open .dropdown-menu {
position: static;
overflow: visible;
position: absolute !important;
background: #edf0f2;
width: 100%;
}
#main-nav > .navbar-left > li > a > i {
font-weight: 400;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding-left: 7px;
}
.mega-dropdown-menu div > li > ul > li > a,
.nav-cart-menu li > ul > li > a {
padding: 5px 7px;
}
.xs-search-widget div > li:last-child > ul {
border: none;
}
.xs-search-widget .dropdown-header {
text-align: center
}
.xs-search {
padding-top: 0;
}
.xs-search > a ,
li.contact > a,
.mega-dropdown > a {
font-size: 30px;
}
.xs-search > a > i ,
li.contact > a > i,
.mega-dropdown > a > i {
font-weight: 400;
}
.xs-search form {
margin: 0;
}
}
/* FEATURED */
#featured {
/*background:#434a54;*/
color:#fff;
min-height:340px;
border-radius:2px;
}
#featured .item {
display:block;
cursor:default;
/*background:#434a54;*/
padding:20px 0px;
min-height:340px;
margin:0;
color:#FFF;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
text-align:center;
-webkit-tap-highlight-color:rgba(255, 255, 255, 0);
}
#featured .featured-text {
position:absolute;
margin-top:-150px;
right:20px;
margin-right: 20px;
float:right !important;
text-align: right;
}
.dark-text {
color:#434a54;
}
@media(max-width:767px) {
#featured .item {
min-height:150px;
}
#featured .item > div {
padding-left:0;
padding-right:0;
}
#featured {
border-radius:0;
margin-bottom: 10px;
min-height:150px;
}
#featured .featured-text {
color:#434a54;
position:relative;
margin-top:10px;
margin-right: 0;
float:none !important;
text-align: center !important;
right:auto;
}
.featured-row {
margin-bottom: 40px;
}
}
/* CONTENT */
.section-header h2, .category-header h2, .search-header h2, .page-header h2, .section-header h3 {
text-transform:uppercase;
font-weight:300;
margin-top:10px;
}
.section-header, .category-header, .search-header h2, .page-header h2 {
margin:40px 0;
}
.section-header h3 {
margin:0;
}
.section-header > div > a {
margin-top:10px;
color:#565c65;
font-weight:300
}
.section-header > div > a:hover {
text-decoration:none;
}
.section-header > div > a.btn-default {
color:#fff;
}
.product-grid, .product-images {
margin-top:20px;
margin-bottom:20px;
}
.product-grid .product, .product-images .product-image, #also .product {
border:3px solid #edf0f2;
border-radius:2px;
padding:2px 0 10px;
margin-bottom:20px;
}
.product-grid .product .title, #also .product .title {
font-size:16px;
}
.product-grid .product .price, #also .product .price {
font-size:20px;
font-weight:800;
}
.product-grid .product .price small {
font-weight:400;
}
.product-grid .product .special, .product-images .special, #also .product .special {
color:#fff;
padding:8px 20px;
font-size:14px;
position:absolute;
margin:10px;
}
.product-grid .product .special-new, .product-images .special-new, #also .product .special-new {
background:#565c65;
border-left:3px solid #363b43;
left:5px;
border-radius:0 2px 2px 0;
}
.product-grid .product .special-offer, .product-images .special-offer, #also .product .special-offer {
background:#f14a5e;
border-right:3px solid #d5041d;
right:5px;
border-radius:2px 0 0 2px;
}
.product-grid .product > p:last-child {
margin-bottom:0;
}
#breadcrumbs .breadcrumb {
font-size:14px;
border-radius:2px;
margin-top:10px;
background-color:#fff;
padding:0;
}
#breadcrumbs .breadcrumb .active a {
pointer-events:none;
cursor:default;
color:#777;
}
#single-product .product-image {
padding-bottom:2px;
}
#single-product #secondary-images {
margin:3px 0;
}
#single-product #secondary-images .thumbnail {
border:none;
padding:0;
margin-right:3px;
display:inline-block;
height:75px;
width:75px;
line-height: 75px;
}
.video-thumbnail > img {margin-top:10px; display:block; vertical-align: middle; line-height: 75px;}
.video-thumbnail .play {position: absolute; height:75px; width:75px; top:0; display: block; float:left;}
.video-thumbnail .play > img {opacity: 0.7;}
.video-thumbnail .play > img:hover {opacity: 1;}
#single-product #price-container {
background:#edf0f2;
padding:15px;
margin-top:20px;
margin-bottom:20px;
margin-left: 15px;
border-radius:2px;
}
#single-product #price-container .price {
font-size:24px;
font-weight:bold;
padding:10px 0 15px;
}
#single-product #price-container .in-stock, #single-product #price-container .out-of-stock {
font-size:14px;
border-bottom:1px solid #e8e8e8;
margin:0 -15px 20px;
text-align:center;
padding-bottom:10px;
}
#tabbed-info {
margin:50px 0 20px;
}
#tabbed-info .nav-tabs {
border:none;
margin-bottom:-1px;
}
#tabbed-info .nav-tabs > li > a {
background-color:#edf0f2;
border-radius:2px 2px 0 0;
color:#a7b7c1;
}
#tabbed-info .nav-tabs > li > a:hover {
background-color:#dbe3e8;
border-color:#dbe3e8;
color:#565c65;
}
#tabbed-info .nav-tabs > li.active > a {
border:2px solid #edf0f2;
border-radius:2px 2px 0 0;
border-bottom-color:#fff;
color:#565c65;
background-color:#fff;
}
#tabbed-info .tab-content {
border:2px solid #edf0f2;
padding:20px 15px;
border-radius:0 2px 2px 2px;
}
#related-products {
margin-top:50px;
}
#page-404 .form-search {
margin-top:0
}
#page-404 .search-wrap input {
height:43px;
}
@media(max-width:767px){
.category-header {
margin:30px 0 0;
}
#single-product #price-container {
border-radius:0;
margin-top:0;
}
#product-description {
padding-right:0;
padding-left:0;
}
.product-description-text {
padding-right:15px;
padding-left:15px;
}
.product-images {
margin-bottom:0;
margin-right:0;
margin-left:0;
padding:0;
}
.product-images .product-image {
border:none;
margin-bottom:5px;
}
}
#pager {
height:50px;
line-height:50px;
margin:0 0 30px;
}
#pager a {
background:#434a54;
color:#edf0f2;
}
#pager a:hover {
text-decoration:none;
background:#363b43;
}
#pager a, #pager .next, #pager .current {
padding:8px 15px;
border-radius:2px;
}
#also .category-header {
margin-bottom:10px;
}
/* CHECKOUT FLOW */
#checkout-steps {
margin-top:40px;
margin-bottom:40px;
height:113px;
}
#checkout-steps:after {
clear:both;
}
.stepwizard-step p {
margin-top:10px;
}
.process-row {
display:table-row;
}
.process {
display:table;
position:relative;
}
.process-step button[disabled] {
opacity:1 !important;
filter:alpha(opacity=100) !important;
}
.process-step i {
font-size:40px;
color:#a7b7c1;
}
.process-step .btn-primary:hover i {
color:#565c65;
}
.process-step .btn-default > i, .process-step .btn-success > i {
color:#fff;
}
.process-row:before {
top:35px;
bottom:0;
position:absolute;
content:"";
width:100%;
margin:0 -15px;
height:1px;
background-color:#ccc;
z-order:0;
}
.process-step {
display:table-cell;
text-align:center;
position:relative;
}
.process-step p {
margin-top:10px;
text-align:center;
}
.btn-circle {
width:70px;
height:70px;
text-align:center;
padding:0 0 3px 2px;
font-size:12px;
line-height:1.428571429;
border-radius:2px;
}
#basket #products {
margin-top:50px;
}
#basket #products-table, #approve #products-table {
display:table;
}
#basket #products-table > .product, #approve #products-table > .product {
display:table-row;
}
#basket #products-table > header.product, #approve #products-table > header.product {
color:#a7b7c1;
}
#basket #products-table > header.product > div, #approve #products-table > header.product > div {
border-bottom:none;
padding-bottom:0;
}
#basket #products-table > .product > div, #approve #products-table > .product > div {
display:table-cell;
padding:20px 5px;
vertical-align:middle;
border-bottom:1px solid #edf0f2;
}
.basket-widget #products-table > .product > div {
padding-top:5px !important;
}
.basket-widget {
margin-top:10px;
}
.basket-widget #basket-total {
margin-top:10px;
}
#basket #products-table > .product > div:last-child {
padding-right:0;
}
#basket #products-table > .product > div:first-child {
padding-left:0;
}
.product-qty input {
background-color:#fff;
background-image:none;
border:2px solid #dbe3e8;
border-radius:2px;
box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;
color:#555;
font-size:14px;
line-height:1.42857;
padding:6px 12px;
text-align:center;
transition:border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
#coupon, #basket-total {
margin-top:50px;
}
#coupon input {
height:49px;
padding:10px 12px;
}
#coupon button {
margin-top:28px;
}
#basket-total #total {
font-size:20px;
font-weight:bold;
text-transform:uppercase;
border-top:2px solid #edf0f2;
padding:10px 0;
}
#basket-total #tax {
font-size:14px;
color:#a7b7c1;
}
#shipping-form #shipping_module {
padding-top:15px;
clear:both;
}
#approve #order-info dl {
margin-top:20px;
}
#order-info {
background:#edf0f2;
border-radius:2px;
padding-top:10px;
padding-bottom:10px;
}
#order-info h4 {
font-weight:300;
text-transform:uppercase;
}
#approve #order-info dl dd.gls-shop br:first-child{
display: none;
}
#continue {
margin:40px -15px;
}
#continue .prev {
text-decoration:underline;
}
@media(max-width:767px){
.process-step > a {
margin:3px;
}
#checkout-steps {
width:100%;
margin:10px -15px;
padding:0;
}
.product-decription {
font-weight:bold;
}
header > .product-decription, .product-decription > .visible-xs {
font-weight:400;
}
#coupon {
margin-top:10px;
}
.section-header {
margin-bottom:30px;
margin-top:0;
}
#approve #order-info dl {
padding-left:15px;
padding-right:15px;
}
}
/* FOOTER */
body > footer {
position:absolute;
bottom:0;
width:100%;
margin-top:30px;
min-height:200px;
background-color:#434a54;
color:#fff;
padding-top:2em;
}
#footer-nav > li > a {
padding:1px 0;
}
#footer-nav > li > a:hover {
background:none;
color:#fff;
}
/* FORMS */
form {
...
}
input {
...
}
i.form-control-feedback {
font-size:25px;
margin-right:5px;
margin-top:2px;
}
.has-error .form-control-feedback {
font-size:18px;
}
/* GENERAL GUBBINS */
.lg-icon {
font-size:1.7em;
}
.btn > i {
position:relative;
top:2px;
}
.lightbox { display: none; }
@media print {
/* All your print styles go here */
html,body {font-size:10pt;}
.section-header {margin-top:5px; margin-bottom: 5px;}
.section-header h2 {font-size: 11pt;}
.section-header h3 {font-size: 10pt;}
.footer-print {font-size: 9pt; bottom:0; text-align: center; margin-top: 40px;}
.brand {display:inline-block; text-align: right}
}
答案 0 :(得分：0)
请检入combined.min.css以及html更改col-sm-8至col-sm-6
body {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 14px; //from 16px to 14px
font-weight: 400;
margin-bottom: 200px;
color: #000;
}
@media (min-width: 768px)
.col-sm-6 {
width: 50%;
float: right;// add this line
}
in html
<div class="row"><span class="brand col-md-6"><a href="/"><img src="assets/img/logo.png" alt="Dronebutikken.dk" title="Drone shop Logo" width="300"></a></span><div class="col-sm-6 hidden-xs"><form id="header-search-form" class="form-search form-horizontal pull-right" action="http://dronebutikken.dk/search"><div class="input-append col-sm-12"><div class="search-wrap"><input type="text" class="search-query" name="search" value="" placeholder="Indtast søgeord"><button type="submit" class="btn btn-primary search-button" value=" "><i class="flaticon-zoom22"></i></button></div></div></form></div></div>