以較小的屏幕搜索欄形式的CSS問題

我遇到了這個奇怪的CSS問題。當我使用頁面寬度超過一些700px，它看起來不錯。但同樣的事情，當我調整它小於700px（我不是確保正確的尺寸），它變得瘋狂變形。寬度之間沒有太大的差別。以較小的屏幕搜索欄形式的CSS問題

我有以下的HTML和CSS，這可能與：

<form class="navbar-form search-form" role="search" form="" action="" method="post" onsubmit="return validate()" style="margin:0px 0px 0px 0px;"> 
    <div class="form-group "> 
    <input type="text" name="s" id="search" size="27" class="form-control form-search search-text ac_input" placeholder="Type your search..." autocomplete="off"> 
    </div> 
    <button type="submit" class="btn search-home " name="subm"> 
    <span class="glyphicon glyphicon-search white"></span> 
    </button> 
</form>`

這是來自自舉對應的CSS：

@media (min-width: 768px) { 
    .navbar-form { 
    width: auto; 
    padding-top: 0; 
    padding-bottom: 0; 
    margin-right: 0; 
    margin-left: 0; 
    border: 0; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    } 
} 
.navbar-form { 
    padding: 10px 15px; 
    margin-top: 8px; 
    margin-right: -15px; 
    margin-bottom: 8px; 
    margin-left: -15px; 
    border-top: 1px solid transparent; 
    border-bottom: 1px solid transparent; 
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1); 
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1); 
}

請幫助我這個問題修復搜索欄。提前致謝。

來源

2016-01-06 mistery_girl

有什麼地方我們可以看到這個生活嗎？或者任何[mcve]？ –

它在本地主機上。 –

啊...好的，Bootstrap也是這樣嗎？ –

看起來問題在於<input />標記的父項。這是一個<div class="form-group">和低於768px，它打破。我遇到過同樣的問題。請試試這個：

.navbar-form.search-form .form-group { 
    float: left; 
}

的float: left在較小的屏幕上被刪除。嘗試這個？這將默認它的所有.navbar-form.search-form，我希望沒有任何其他形式使用相同的類。

此外，如果您添加id說，#search-form，然後您可以以這種方式定位它，則更好。

來源

2016-01-06 19:09:07

您是如何知道表單標記的父級是div的？它沒有在代碼中顯示。 – pabrams

@pabrams抱歉。不是父母。大聲笑。 –

@pabrams我很愚蠢。查看更新！大聲笑。 –

以較小的屏幕搜索欄形式的CSS問題

回答

相關問題