英文:
How to wrap content to fit column width in Bootstrap?
问题
我有以下内容：
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row">
<div class="col-xs-2 col-md-4">
Name
</div>
<div class="col-xs-10 col-md-8">
<b class="d-block">Here some name</b>
</div>
</div>
<!-- 结束代码片段 -->
在较小的设备上查看时，我希望列的宽度具有优先级，并且其中的内容应该换行。目前，列是按顺序显示的。
我该如何解决这个问题？
英文:
I have the following:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row">
<div class="col-xs-2 col-md-4">
Name
</div>
<div class="col-xs-10 col-md-8">
<b class="d-block">Here some name</b>
</div>
</div>
<!-- end snippet -->
When viewing on smaller devices I would like that the column widths have priority and the content within them should wrap. Currently, the columns are displayed under each other.
How can I fix this?
答案1
得分: 1
你只需编写这个类：.col-，并且如果需要，你还可以将.container类添加到容器中，以便从两侧获得一些边距。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row container">
<div class="col-2 col-md-4">
Name
</div>
<div class="col-10 col-md-8">
<b class="d-block">Here some name</b>
</div>
</div>
英文:
You are gonna have to only write this class: .col- and you can also add the .container class to the container to get some margin from the both sides if you want.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row container">
<div class="col-2 col-md-4">
Name
</div>
<div class="col-10 col-md-8">
<b class="d-block">Here some name</b>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论