如何使用CSS使搜索栏具有响应性

我的网页上有一个搜索栏

它在移动设备上仅显示一半宽度，看起来很小。我如何使用CSS使其具有响应性，以便它在手机上占据全部宽度，并位于分页页面链接之上

<div class="blogpage_search" style="width: 50%; float:left;">
<form role="search" method="get" id="searchform" class="searchform" action="http://positivelynuts.co.uk">
<div class="search-form">
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Search">
</div>
</form>
</div>

---

使用

宽度：100%

<div class="blogpage_search" style="width: 100%; float:left;">

首先取出
style=“width:50%；float:left；”
元素，并将其添加到css文件中：

.blogpage_search {
   width: 50%;
   float: left;
   margin-top: 7px;
}

@media screen and (max-width: 600px) {
   .blogpage_search {
      float: none;
      width: 100%;
      margin: 10px auto;
   }
}

那就应该成功了！谢谢大家!
 
如果您需要我帮助您创建搜索框，请使用引导