使用Bootstrap v4对齐按钮

Question

Bootstrap v4会删除.btn-group-justified课程，请参阅https://github.com/twbs/bootstrap/issues/17631

如何证明按钮的合理性：

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>

Answer 1

For anyone finding this after Bootstrap 4 Beta was released...

package example.btmodule;

import android.bluetooth.BluetoothAdapter;
import android.bluetooth.BluetoothDevice;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.Set;

import static example.btmodule.R.layout.activity_device_list;

public class DeviceList extends AppCompatActivity {

    ListView devicelist;

    private BluetoothAdapter myBluetooth = null;
    private Set<BluetoothDevice> pairedDevices;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(activity_device_list);

        myBluetooth = BluetoothAdapter.getDefaultAdapter();

        if(myBluetooth == null)
        {
            //Show a mensag. that thedevice has no bluetooth adapter
            Toast.makeText(getApplicationContext(), R.string.bluetooth_unavailable, Toast.LENGTH_LONG).show();
            //finish apk
            finish();
        }
        else {
            if (myBluetooth.isEnabled()) {
            } else {
                //Ask to the user turn the bluetooth on
                Intent turnBTon = new Intent(BluetoothAdapter.ACTION_REQUEST_ENABLE);
                startActivityForResult(turnBTon, 1);
            }
        }
    }

    private void pairedDevicesList()
    {
        pairedDevices = myBluetooth.getBondedDevices();
        ArrayList list = new ArrayList();

        devicelist = (ListView)findViewById(R.id.listDevicesDialog);

        if (pairedDevices.size()>0)
        {
            for(BluetoothDevice bt : pairedDevices)
            {
                list.add(bt.getName() + "\n" + bt.getAddress()); //Get the device's name and the address
            }
        }
        else
        {
            Toast.makeText(getApplicationContext(), R.string.no_devices_found, Toast.LENGTH_LONG).show();
        }

        final ArrayAdapter adapter = new ArrayAdapter(this,android.R.layout.simple_list_item_1, list);
        devicelist.setAdapter(adapter);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    // menu item selection
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle item selection
        switch (item.getItemId()) {
            case R.id.action_connect:
                showDialog();
                pairedDevicesList();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
    // show the dialog for connected devices
    private void showDialog(){
        AlertDialog.Builder mBuilder = new AlertDialog.Builder(DeviceList.this);
        View mView = getLayoutInflater().inflate(R.layout.device_dialog, null);
        mBuilder.setView(mView);
        AlertDialog dialog = mBuilder.create();
        dialog.show();
    }

}

Answer 2

确实缺少导航证明课程。您现在可以根据TB3的代码自行添加它：

SCSS代码

// Justified button groups
// ----------------------

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  .btn,
  .btn-group {
    float: none;
    display: table-cell;
    width: 1%;
    .btn {
      width: 100%;
    }
    .dropdown-menu {
      left: auto;
    }
  }
}

编译的CSS代码

.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate; }
  .btn-group-justified .btn,
  .btn-group-justified .btn-group {
    float: none;
    display: table-cell;
    width: 1%; }
    .btn-group-justified .btn .btn,
    .btn-group-justified .btn-group .btn {
      width: 100%; }
    .btn-group-justified .btn .dropdown-menu,
    .btn-group-justified .btn-group .dropdown-menu {
      left: auto; }

HTML

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <a class="btn btn-primary" href="#" role="button">Left</a>
   <a class="btn btn-primary" href="#" role="button">Middle</a>
   <a class="btn btn-primary" href="#" role="button">Right</a>
 </div>

上面的HTML代码现在看起来如下图所示：

处理边界

• 由于用于对齐按钮的特定HTML和CSS（即display: table-cell），它们之间的边界加倍。在常规按钮组中，margin-left: -1px用于堆叠边框而不是删除它们。但是，margin不适用于display: table-cell。因此，根据您对Bootstrap的自定义，您可能希望删除或重新着色边框。

充当按钮的链接

• 如果<a>元素用作按钮 - 触发页内功能，而不是导航到当前页面中的其他文档或部分 - 还应该为它们提供适当的role="button"。

Dropdowns的

使用以下HTML代码进行下拉按钮：

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
   <a class="btn btn-secondary" href="#" role="button">Left</a>
   <a class="btn btn-secondary" href="#" role="button">Middle</a>
    <div class="btn-group">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
      </div>
    </div>
 </div>

带有下拉按钮的对齐按钮组应如下图所示：

使用<button>元素

• 要使用带有<button>元素的对齐按钮组，，您必须将按钮组中的每个按钮包裹。大多数浏览器都没有正确地将我们的CSS应用于<button>元素的理由，但由于我们支持按钮下拉，我们可以解决这个问题。

HTML

 <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-secondary">Left</button>
   </div>
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-secondary">Middle</button>
   </div>
   <div class="btn-group" role="group">
     <button type="button" class="btn btn-secondary">Right</button>
  </div>
 </div>

以上用于对<button>元素组合的按钮组的HTML代码应该如下图所示：

Answer 3

与class="dropdown-menu"一起使用Bootstrap V4.0时，基于Chris Baswell＆＃39;上面的解决方案和Bootstrap文档：https://getbootstrap.com/docs/4.0/components/button-group/#nesting

<div class="btn-group d-flex" role="group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <div class="btn-group w-100" role="group">
        <button type="button" class="btn btn-secondary dropdown-toggle-no-carret w-100" title="MANAGE ENTRIES" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Drop Down
        </button>
        <div class="dropdown-menu">
            <a href="" class="btn btn-secondary w-100">Previous</a>
            <a href="" class="btn btn-secondary w-100">Next</a>
        </div>
    </div>
</div>