在Bootstrap 3中自定义搜索框CSS并在导航栏中放置元素

Question

我是Bootstrap的新手，我很难按照自己想要的方式对齐元素。

我希望我的导航栏看起来像这样：  现在，它是这样的：

我应该怎么做才能让徽标在侧面移动几个像素？我尝试使用style.css中的margin-left来覆盖Bootstrap CSS：

但是这会以中小分辨率取代徽标。像这样：

我希望当显示器为中等和小时时，徽标会粘在角落上，只有当分辨率为满刻度时才会像图像中所示的那样移位。我被告知我必须使用媒体查询来做到这一点。使用Bootstrap 3类甚至媒体查询中的实现的任何其他更好的替代方案都可以。我托管了网站here以及HTML / CSS和Bootstrap文件here。

我在搜索框中遇到了另一个小问题。 现在，它是这样的：

我希望它看起来像这样：

我应该对我的搜索框看起来像我想要的CSS代码做出什么改变？ 我很难将自定义添加到Bootstrapped CSS。

Answer 1

就搜索输入而言，您可以尝试类似......

      <style>
        .search-input{
         background-color: rgb(228, 102, 48); 
         border: 2px solid #fff; 
         box-shadow: none; 
         border-radius: 50px;
         color: #fff;
        }

        .search-input ::-webkit-input-placeholder, .search-input :-moz-placeholder, .search-input ::-moz-placeholder, .search-input :-ms-input-placeholder { {
           color: #fff;
           font-weight: bold;
        }

/** rotation if needed **/
       .glyphicon-rotate-180 {
         transform: scaleX(-1);
     -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
        }

        .search-icon {
        position:relative; 
        color: #fff; 
        right: 30px; 
        top: 2px;
        }

        </style>

我可能会把css放在你的主要css表中。

这就是标记的样子......

<input type="text" class="form-control search-input" placeholder="Search" name="srch-term" id="srch-term" />
<a class="search-icon" type="submit"><i class="glyphicon glyphicon-search glyphicon-rotate-180"></i></a>

**编辑

用

替换样式

  .search-icon {
            position:relative; 
            color: #fff; 
            right: 30px; 
            top: 29px;
            }

<div class="pull-left" style="position: relative;">
<input id="srch-term" class="form-control search-input pull-left" type="text" placeholder="Search" name="srch-term">
<a class="search-icon" type="submit">
<i class="glyphicon glyphicon-search glyphicon-rotate-180"></i>
</a>
</div>

Answer 2

这里有一个媒体查询示例：

@media (max-width: 767px) {
    #logo {
        margin-left: 0px;
    }
}

@media (min-width: 768px) {
    #logo {
        margin-left: 0px;
    }
}

@media(min-width:992px) {
    #logo {
        margin-left: 250px;
    }
}

只需将其添加到您的CSS文件中，通过您的徽标更改ID，它应该按预期工作。小于992px的分辨率将应用margin-left：0px;

关于输入。要覆盖bootstrap的规则，您可以使用！important或更具体地说明元素：

.navbar .nav li .input-group input { ... }

这应该使您看起来与您想要的输入非常相似：

.input-group {
    border: 2px solid white !important;
    border-radius: 20px !important;
}

.input-group input {
    background: orange !important;
    border: 0px !important;
    border-radius: 20px !important;
}

.input-group .input-group-addon {
    background: orange !important;
    border: 0px !important;
    border-radius: 20px !important;
}