Question

我目前正在使用bootstrap web框架，我遇到了一些关于如何对齐所有按钮组以适应按钮内部文本大小的问题？

html文件：

export class GridComponent {

private gridOptions: GridOptions;
private columnDefinitions = [];
private defaultColumnDefinitions = {};
private rowData = [];
private startDate: Date = new Date(2017, 3, 1);
private finishDate: Date = new Date(2017, 3, 12);

constructor( private taskDataService: TaskDataService, private gridService: GridService ) {

    // Initialise the grid.
    this.initialiseGrid();
}

initialiseGrid() {

    this.gridOptions = {};

    // Set default options.
    this.gridOptions.headerHeight = 24;
    this.gridOptions.showToolPanel = false;

    // Get the initial default column definitions.
    this.defaultColumnDefinitions = this.gridService.getDefaultColumnDefinition();

    // Get the initial column definitions.
    this.columnDefinitions = this.gridService.getAllGroupColumnDefinitionsByDay(this.startDate, this.finishDate);

    // Get the initial row data.
    this.rowData = this.taskDataService.getTaskGridDataByDay(this.startDate, this.finishDate);

    // Set the gridOptions properties.
    this.gridOptions.columnDefs = this.columnDefinitions;
    this.gridOptions.defaultColDef = this.defaultColumnDefinitions;
    this.gridOptions.rowData = this.rowData;
}

zoomHour() {
    //alert("zoom hour");

    // Set the column definition.
    this.columnDefinitions = this.gridService.getAllGroupColumnDefinitionsByHour(this.startDate, this.finishDate);

    // Set the row data.
    this.rowData = this.taskDataService.getTaskGridDataByHour(this.startDate, this.finishDate);

    // Set the column width.
    this.gridOptions.defaultColDef.width = 32;

    this.updateGrid();
}

zoomDay() {
    //alert("zoom day");

    // Set the column definition.
    this.columnDefinitions = this.gridService.getAllGroupColumnDefinitionsByDay(this.startDate, this.finishDate);

    // Set the row data.
    this.rowData = this.taskDataService.getTaskGridDataByDay(this.startDate, this.finishDate);

    // Set the column width.
    this.gridOptions.defaultColDef.width = 32;

    this.updateGrid();

}

updateGrid() {

    // Set the gridOptions properties.
    this.gridOptions.api.setRowData([]);
    this.gridOptions.api.setColumnDefs([]);
    this.gridOptions.api.refreshView();

    this.gridOptions.api.setRowData(this.rowData);
    this.gridOptions.api.setColumnDefs(this.columnDefinitions);
    this.gridOptions.api.refreshView();

}
}

正如您所看到的，第一个按钮未与其合并的组对齐。

希望有人可以帮助我。

Answer 1

您的标记遇到了一些问题。它应该是<br> not </br>。用户按钮和状态按钮的内容也不同。所以相同的填充将无法正常工作。提供示例代码段。

<强>段

var button1 = 1;
    var button2 = 1;
    var button3 = 1;
    var button4 = 1;
    function changeClass(btn) {
        var property = document.getElementById(btn);
        switch(btn){
            case 'button1':
                if (button1 == 0) {
                    property.className = 'btn btn-default btn-lg col-xs-3';
                    button1 = 1;       
                }
                else {
                    document.getElementById('button2').className = 'btn btn-default btn-lg col-xs-3';
                    document.getElementById('button3').className = 'btn btn-default btn-lg col-xs-3';
                    document.getElementById('button4').className = 'btn btn-default btn-lg col-xs-3';
                    property.className += 'btn btn-success btn-lg flash-button col-xs-3';
                    button1 = 0;
                    button2 = 1;
                    button3 = 1;
                    button4 = 1;
                }
                break;
            case 'button2':
                if (button2 == 0) {
                    property.className = 'btn btn-default btn-lg  col-xs-3';
                    button2 = 1;     
                }
                else {
                    document.getElementById('button1').className = 'btn btn-default btn-lg col-xs-3';
                    document.getElementById('button3').className = 'btn btn-default btn-lg col-xs-3';
                    document.getElementById('button4').className = 'btn btn-default btn-lg col-xs-3';
                    property.className += 'btn btn-warning btn-lg flash-button col-xs-3';
                    button2 = 0;
                    button1 = 1;
                    button3 = 1;
                    button4 = 1;
                }
                break;
            case 'button3':
                if (button3 == 0) {
                    property.className = 'btn btn-default btn-lg col-xs-3';
                    button3 = 1;     
                }
                else {
                    document.getElementById('button1').className = 'btn btn-default btn-lg col-xs-3';
                    document.getElementById('button2').className = 'btn btn-default btn-lg col-xs-3';
                    document.getElementById('button4').className = 'btn btn-default btn-lg col-xs-3';
                    property.className += 'btn btn-danger btn-lg flash-button col-xs-3';
                    button3 = 0;
                    button1 = 1;
                    button2 = 1;
                    button4 = 1;
                }
                break;
            case 'button4':
                if (button4 == 0) {
                    property.className = 'btn btn-default btn-lg col-xs-3';
                    button4 = 1;     
                }
                else {
                    document.getElementById('button1').className = 'btn btn-default btn-lg col-xs-3';
                    document.getElementById('button2').className = 'btn btn-default btn-lg col-xs-3';
                    document.getElementById('button3').className = 'btn btn-default btn-lg col-xs-3';
                    property.className += 'btn btn-danger btn-lg flash-button col-xs-3';
                    button4 = 0;
                    button1 = 1;
                    button2 = 1;
                    button3 = 1;
                }
                break;
        } 
    }

.flash-button{  
    animation-name: flash;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    //Firefox 1+
    -webkit-animation-name: flash;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    //Safari 3-4
    -moz-animation-name: flash;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
}

@keyframes flash {  
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

//Firefox 1+
@-webkit-keyframes flash {  
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

//Safari 3-4
@-moz-keyframes flash {  
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}

.btn-space {
    margin-bottom: 15px;
     
}

.responsive-width {
    font-size: 3vw;
}
.btn{
    white-space:normal !important;
    word-wrap:break-word; 
    padding: 25px !important;
}
#button1 {
line-height: 1.35;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
    initial-scale=1">
<title>Button Groups</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



</head>

<body>
<div class="container">

<h2>Button Groups</h2>

 <div class = "row btn-space">
 <div class="btn-group col-xs-12">
        <button type="button" id="button1" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button1')">User</button>
        <button type="button" id="button2" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button2')">Status 2</button> 
        <button type="button" id="button3" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button3')">Status 3</button>
        <button type="button" id="button4" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button4')">Status 4</button>
 </div><br><br>
 </div>

<div class = "row btn-space">
     <div class="btn-group col-xs-12">
         <button type="button" id="button5" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button5')">Status 1</button>
        <button type="button" id="button6" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button6')">Status 2</button> 
        <button type="button" id="button7" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button7')">Status 3</button>
        <button type="button" id="button8" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button8')">Status 4</button>
</div><br><br>
</div>

<div class = "row btn-space">
 <div class="btn-group col-xs-12">
 <button type="button" id="button9" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button9')">Status 1</button>
 <button type="button" id="button10" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button10')">Status 2</button> 
 <button type="button" id="button11" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button11')">Status 3</button>
 <button type="button" id="button12" class="btn btn-default btn-lg col-xs-3" onclick="changeClass('button12')">Status 4</button></div><br><br>
</div>
</div>



</body>
</html>

Bootstrap按钮组大小不同

1 个答案: