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

Question

我正在尝试在其下放置一个带有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;
}

Answer 1

您的输入字段设置为300px，因此，如果您将最大宽度设置为300px，但将宽度设置为100％，则会溢出，这将使其限制为页面大小，但绝不会超过300px。< / p>

https://jsfiddle.net/6u4v0dnq/

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