我有以下HTML页面,可以在大中型设备上正常显示,但是在较小的屏幕上存在问题。
当屏幕变小时,灰色元素内的文本(下例中的“在此处烦人的文本”)将占据所有空间,将新的2个向右浮动按钮按入新行,而无需将它们保持在相同的高度。
以下是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">×</i>
</button>
<button class="btn btn-md float-right bg-primary">
<i class="fas fa-print text-white">×</i>
</button>
</div>
</div>
</div>