為什么內聯元素會包裹在小屏幕上？

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。

https://jsfiddle.net/6u4v0dnq/

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