javascript - 在 Bootstrap 3 中自定义搜索框 CSS 以及在导航栏中放置元素

Question

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

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

我应该怎么做才能使 Logo 在侧面移动几个像素？我尝试通过在 style.css 中使用 margin-left 来覆盖 Bootstrap CSS:

但这会取代中小分辨率的 Logo 。像这样:

我希望 Logo 在中小显示器时贴在 Angular 落上，并且只有在分辨率为全尺寸时才像图像中所示那样移动。我被告知我必须使用媒体查询来做到这一点。使用 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>