自定義Bootstrap 3中的搜索框CSS，並在導航欄中放置元素

Question

我是Bootstrap的新手，我很難按照自己的方式對齊元素。

我希望導航欄如下所示： 現在，它是這樣的：

我應該怎么做才能使徽標在側面移動幾個像素？ 我嘗試通過在style.css中使用margin-left來覆蓋Bootstrap CSS：

但這會將徽標以中小分辨率替換。 像這樣：

我希望徽標在中小型顯示器上貼在角落上，並且僅在分辨率為全尺寸時才像圖像中所示那樣移位。 我被告知必須使用媒體查詢來執行此操作。 使用Bootstrap 3類甚至在Media Queries中實現的任何其他更好的選擇都可以。 我主持的網站在這里和HTML / CSS和引導文件在這里 。

我的搜索框還有另一個小問題。 現在，它是這樣的：

我希望它看起來像這樣：

我應該對搜索框看起來像我想要的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；

關於輸入。 要覆蓋引導程序的規則，您可以使用！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;
}