html - 为什么嵌入式元素会在小屏幕上包装？

我正在尝试在其下放置一个带有div的输入字段。当我使用浏览器时，一切都很好，但是只要尝试在手机或任何较小的屏幕上查看它，它就会中断。

我正在使用Bootstrap。我尝试使用由“ px”插入的“ vh”，但这并没有太大帮助。

。

HTML：

<div class="container-fluid d-flex  ">
  <div class="row  align-self-center ">
    <div class="col-12">
     <span id="icon"></span>
     <input type="text" id="city"></input>

     <br><div id="res" class="nText"> citudin. Praesent hendcongue. Ut commodo
est ut orci suscipit tincidunt. Sed ac est sed mi tristique sollicongue. Ut
commodo est ut orci suscipit tincidunt. Sed ac est sed mi tristique
sollirerit in velit non ullamcorper. Quisque volutpat, justo id lobortis
finibus, tellus nibh lobortis augue, at semper nisl justo viverra mi.</div>
 </div>
</div>
</div><!-- end container-->

CSS：

html, body {
width: 100%;
height: 100%;
}

.nText {
background-color: lightgray;
}

.container-fluid {
min-height: 100%;
min-width: 100%;
background-color:lightblue;
}


#city {
width: 300px;
border: none;
border-radius: 10px;
padding-left: 20px;
}

最佳答案

您的输入字段设置为300px，所以它溢出了，如果您改为将最大宽度设置为300px，但是将宽度设置为100％，则将其限制为页面的大小，但宽度不得超过300px。

https://jsfiddle.net/6u4v0dnq/

#city {
  max-width: 300px;
  width: 100%;
  border: none;
  border-radius: 10px;
  padding-left: 20px;
}

关于html - 为什么嵌入式元素会在小屏幕上包装？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56689414/