Question

！不要将其作为重复关闭，并且＆＃34;重复的答案＆＃34;只相对于X按钮居中！

我试图将bootstrap4模态的模态标题完全居中。但是，它只相对于X居中，而不是模态的整个宽度。这里的答案：Bootstrap 4 Modal Center Content都有同样的问题。

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center d-block">
          <h5 class="modal-title d-inline-block" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

标题未完全居中，因为您可以在此图片上看到： modal header centered relative to X

我的问题是，是否可以将其置于模态的右边缘 - 而不是X.

Answer 1

默认使用close定位float:right，将其作为文档流的一部分。因此，modal-title始终将自身的中心分别设置为减去 close所使用的宽度。

要解决问题，我们需要将close拉出流程。最简单的方法是：

.close { 
  position: absolute; 
  right: 1rem;
}

position: absolute将该类从正常流中拉出来，这又使modal-title占据整个宽度。 right边距旨在复制为模态组件定义的边距，以确保您的布局保持或多或少不变。

Answer 2

这样的事情怎么样：

#exampleModalLabel {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

Answer 3

在模式标题中放置文本中心的d块
关闭按钮
最后一个模态标题。

<div class="modal-header text-center d-block">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h2 class="modal-title">Title center</h2>
    ...
</div>

Answer 4

在我这边，我做了以下事情：-

注意：我的模态的大小是默认的，它既不大也不小。

然后在Modal :: Begin中，我添加了titleOptions如下

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  
 <h1>機械別工程残</h1>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(getData);
  
  function getData(){
  
  google.script.run.withSuccessHandler(drawChart).timelineData();
  
  }
  
  function drawChart(dane) {
  //console.log(dane);
  const obj = JSON.parse(dane);
   const newAr = obj.map(r=>[r[0],r[1], new Date(r[2]), new Date(r[3])]);
    var container = document.getElementById('chart');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: '機械' });
    dataTable.addColumn({ type: 'string', id: 'オーダー' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows(newAr);
    
    var options = {
     colors: ['#cbb69d', '#603913', '#c69c6e', '#e743f0', '#f04343', '#f0e443', '#b9f043', '#4ff043', '#43f0d9', '#435df0'],
     
     // timeline: { colorByRowLabel: true}
　　};
    chart.draw(dataTable, options);
  }
</script>

<div id="chart" style="height: 600px;"></div>
    
  </body>
</html>

Bootstrap4模态标题未完全居中

4 个答案: