Bootstrap 按钮上的自动换行不起作用

debugcn 发表于 Dev

小精灵

我在一个简单的页面上有一个引导程序布局，只有一些列在全屏上排序的行，没有设置 with 或 hight，应该保持这种方式。

这是我的布局定义

<div class="container-fluid">
    <div class="row">
        <div class="section col-lg">
            <ul class="list-group>

在ul里面我有一个这样的按钮

<a type="button" class="btn btn-success list-group-item list-group-item-warning"
    href="https://www.google.at" target="_blank">
    <i class="material-icons">extension</i>
    <br>
    asdfasdfasdfasd fasdfasdfasdfasdfasdf
</a>

但现在的问题是按钮文本溢出并且没有包裹在按钮内。

我已经尝试过使用小屏幕时在按钮文本内强制换行的解决方案，但这也只是剪切按钮文本而不是将其换行到下一行

我也试过，overflow : hidden;但这也只是在它溢出之前隐藏文本

输入颜色

通过为较小的屏幕添加这个 @media 查询 CSS，您可以根据需要将按钮文本在按钮语句中的间隙处拆分多次以适合按钮内部：

CSS

@media only screen and (max-width: 30em) {

   body .btn { white-space: normal; }

}

正如您在此图像中看到的，这将覆盖所有查看设备，宽度低至 232 像素，远低于编码最小媒体查询的标准宽度：

即使你想在这个标准宽度以下编码，CSS 片段仍然有效。这是 186px 几乎荒谬的宽度的结果，只需再次拆分问题中的文本即可实现。您可以通过添加 Bootstrap<small></small>对 BS4.btn文本的推荐用法使文本更小>>> https://getbootstrap.com/docs/4.0/content/typography/#inline-text-elements

我还在下面的 Stack Overflow 代码片段中添加了 CSS 作为其功能可行性的证据，但我应该注意（如您所知）这不是我自己的代码。我从这里的另一个 Stack Overflow 问题中得到它 >>>使用小屏幕时在按钮的文本中强制换行

我希望它有助于解决您的问题。

@media only screen and (max-width: 30em) {
  body .btn { white-space: normal; }
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	
	<style>


    </style>
  </head>
  
  <body>
  
	  <div class="container-fluid">
		<div class="row">
			<div class="section col-lg">
				<a type="button" class="btn btn-success list-group-item list-group-item-warning"
					href="https://www.google.at" target="_blank">
					<i class="material-icons">extension</i>
					<br>
					asdfasdfasdfasd fasdfasdfasdfasdfasdf
				</a>
			</div>
		</div>
	  </div>


	
	<!-- javascript -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  
  </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。