html - Bootstrap 4 文本将按钮推到新行

Question

我有以下 HTML 页面，可以在中型和大型设备上正常呈现，但在较小的屏幕上存在问题。
当屏幕变小时，灰色元素内的文本（下例中的“烦人的文本”）占据了所有空间，将两个右浮动按钮推到新的一行，而不将它们保持在相同的高度。

以下是 HTML 示例：

    <div class="row mt-2">
      <div class="col-sm-12 col-lg-4 offset-lg-1 gray">
        <p class="h3 text-primary">Annoying text here
        <button class="btn btn-md float-right ml-3 bg-primary">
         <i class="fas fa-cogs text-white"></i>
        </button>
        <button class="btn btn-md float-right bg-primary"> 
         <i class="fas fa-print text-white"></i>
        </button>
      </div>
     </div>

.gray CSS 类如下：

 .gray{
    height: 70px;
    margin-top: 10px;
    padding-left: 20px;
    padding-top:20px;
    background-color:#eee;
    border-style: solid;
    border-radius: 5px;
    border-width: 1px;
    border-color: #337AB7;
}

我的目标是让文本要么被按钮覆盖而不用推动它们，要么让它崩溃，
例如，而不是“烦人的文字”，比如“烦人
的……”所以为了避免问题第一名。我不确定我是否表达了自己，所以让我知道，我会编辑！非常感谢

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<style type="text/css">
     .gray{
        height: 70px;
        margin-top: 10px;
        padding-left: 20px;
        padding-top:20px;
        background-color:#eee;
        border-style: solid;
        border-radius: 5px;
        border-width: 1px;
        border-color: #337AB7;
     }
    </style>
    <div class="container">
    <div class="row mt-2">
      <div class="col-sm-12 col-lg-4 offset-lg-1 gray">
        <p class="h3 text-primary">Annoying text here
        <button class="btn btn-md float-right ml-3 bg-primary">
         <i class="fas fa-cogs text-white">&times</i>
        </button>
        <button class="btn btn-md float-right bg-primary"> 
         <i class="fas fa-print text-white">&times</i>
        </button>
      </div>
     </div>    
    </div>

标签： htmlcssbootstrap-4

Answer 1

请检查下面的代码它应该适合你

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<style type="text/css">
     .gray{
        height: 70px;
        margin-top: 10px;
        padding-left: 20px;
        padding-top:10px;
        background-color:#eee;
        border-style: solid;
        border-radius: 5px;
        border-width: 1px;
        border-color: #337AB7;
     }
	p.h3 {
		display: inline-block;
		width: 60%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		float: left;
		line-height: 1.4;
	}
	.float-right {
		float: right;
	}
</style>
<div class="container">
<div class="row mt-2">
  <div class="col-sm-12 col-lg-4 offset-lg-1 gray">
	<p class="h3 text-primary">Annoying text here</p>
	<button class="btn btn-md float-right bg-primary" style="margin-left:10px;">
	 <i class="fas fa-cogs text-white">&times</i>
	</button>
	<button class="btn btn-md float-right bg-primary"> 
	 <i class="fas fa-print text-white">&times</i>
	</button>
  </div>
 </div>    
</div>