Bootstrap 4文本将按钮推到新行

时间:2018-12-04 14:52:58

标签: html css bootstrap-4

我有以下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">&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>

1 个答案:

答案 0 :(得分:1)

请检查以下代码,它应该对您有用

processing_date = context['execution_date'] - timedelta(days=3)

enter image description here