html - 为什么内联元素会在小屏幕上换行？

Question

我正在尝试在其下方放置一个带有 div 的输入字段。当我使用我的浏览器时，一切都很好，但每当我试图在我的手机或任何更小的屏幕上查看它时，它就会崩溃。

我正在使用 Bootstrap 。我尝试使用“vh”代替“px”，但这并没有太大帮助。

.

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

您的输入字段设置为 300 像素，因此它会溢出，如果您改为将最大宽度设置为 300 像素，但将宽度设置为 100%，这将使其限制为页面大小，但绝不会超过 300 像素。

https://jsfiddle.net/6u4v0dnq/

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