我試圖在bootstrap navbar中制作一個(gè)搜索框，就像bootstrap網(wǎng)站上的例子一樣。我的搜索框里也有一個(gè)插件。由于某種原因，inout框不是圓形的。這是它現(xiàn)在的樣子:

我希望左側(cè)也像插件的右側(cè)一樣是圓形的。 以下是我的代碼:

<form class="navbar-form navbar-left" id="search" role="search">                                    
                                <button id="search-button" type="button" class="btn btn-info">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>                                   
                                <div id="search-form" class="form-group">
                                    <div class="input-group">                                       
                                        <input type="text" class="form-control" id="search-input" placeholder="Search">
                                        <span id="search-icon" class="input-group-btn">
                                            <button class="btn btn-info">
                                                <span class="glyphicon glyphicon-search"></span>
                                            </button>
                                        </span>
                                    </div> 
                                </div>
                            </form>

我有一些額外的id來為這個(gè)盒子添加消失功能，就像本教程中一樣。

添加我的CSS后，我意識(shí)到我覆蓋了它，我已經(jīng)修復(fù)了CSS，現(xiàn)在它可以工作了。謝謝你們的幫助，如果你們不建議張貼我的CSS，我就不會(huì)找到它。

嘗試用這個(gè)來改變你想要的類的邊框半徑: 將此應(yīng)用到css文件中的html類

border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;