Question

我在试图让我的按钮左边与a href对齐时遇到问题。我使用bootstrap 3.

有人可以帮忙吗？

<ul class="nav nav-list"> 
    <li class="nav-header">Type</li> 
    <li class="active"> 
    <button type="button" class="remove-filter" data-url="https://www.url.com">×</button>
        <a href="https://www.url.com/type:bananas"> Bananas </a> 
    </li> 
<ul>

Answer 1

您可能需要在"display: inline"标记中添加a样式。这是一个有效的例子。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-list">
  <li class="nav-header">Type</li>
  <li class="active">
    <button type="button" class="remove-filter" data-url="https://www.url.com">×</button>
    <a href="https://www.url.com/type:bananas" style="display: inline;"> Bananas </a> 
  </li>
  <ul>

Answer 2

您只需将pull-left课程添加到按钮即可。

<button type="button" class="remove-filter pull-left" data-url="https://www.url.com">×</button>

您可以在

下找到该代码段

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<ul class="nav nav-list"> 
    <li class="nav-header">Type</li> 
    <li class="active"> 
    <button type="button" class="remove-filter pull-left" data-url="https://www.url.com">×</button>
        <a href="https://www.url.com/type:bananas"> Bananas </a> 
    </li> 
<ul>

在引导程序3中左对齐按钮

2 个答案: