html - 具有网格响应能力的引导程序仅适用于 15 个字符的第一个单词

Question

我正在尝试使用简单的 Bootstrap 来获得响应能力。只有当我使用超过 15 个字符的第一个单词时，响应性才有效，如下所示。

<!-- Headers -->
<div class="container">
<div class="row justify-content-center">
<div class="col">
   <p>1234567</p> <!---- not responsive-->
   <p>123456789012345 there is difference between knowing 
     the path and walking the path</p> <!-- responsiveness -->
</div>
<div class="col">
    <form> ...</form>
</div>

如何在不改变句子第一个单词的长度的情况下获得响应。

标签： htmlcss

Answer 1

我认为您需要了解引导网格系统的工作原理。所以我认为以下链接将帮助您学习引导程序。如果您想学习 bootstrap 3，请参考以下 Bootstrap 3 网格系统链接将对您有所帮助。

https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

如果您想学习 bootstrap 4，请参考 Bootstrap 4 网格系统的以下链接将对您有所帮助。

https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

此外，您需要学习媒体查询，这将帮助您设计响应式布局。请参阅以下链接以了解媒体查询和断点。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

根据您在图像中的布局，以下代码将为您提供帮助。运行代码片段。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 text-center">
   <p>1234567</p> <!---- not responsive-->
   <p>123456789012345 there is difference between knowing 
     the path and walking the path</p> <!-- responsiveness -->
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 reg_form">
    <form class="text-center">  
		<h4> Registration </h4>
		<input type="email" class="form-control" placeholder="Email" required>
		<input type="password" class="form-control" placeholder="Enter Password" required>
		<input type="password" class="form-control" placeholder="Confirm Password" required>
		<input type="checkbox"> I agree. <br>
		<input type="submit" class="btn btn-info">
	</form>
</div>