不带标签的Bootstrap自定义Radiobox被取消对齐

Question

我正在使用Bootstrap4自定义单选按钮，只要我使用Label文本就可以正常工作。有时候有文字是没有意义的，但是单独的无线电按钮是不合适的。如何解决这个问题？

"""
    month_to_quarter(date)

Returns the date corresponding to the first day of the quarter enclosing date

# Examples
```jldoctest
julia> Date(1990, 1, 1) == RED.month_to_quarter(Date(1990, 2, 1))
true
julia> Date(1990, 1, 1) == RED.month_to_quarter(Date(1990, 1, 1))
true
julia> Date(1990, 1, 1) == RED.month_to_quarter(Date(1990, 2, 25))
true
```
"""
function month_to_quarter(date::Date)
    new_month = 1 + 3 * floor((Dates.month(date) - 1) / 3)
    return Date(Dates.year(date), new_month, 1)
end


""" 
    monthly_to_quarterly(monthly_df)

Aggregates a monthly data frame to the quarterly frequency. The data frame should have a :DATE column.

# Examples
```jldoctest
julia> monthly = convert(DataFrame, hcat(collect([Dates.Date(1990, m, 1) for m in 1:3]), [1; 2; 3]));

julia> rename!(monthly, :x1 => :DATE);

julia> rename!(monthly, :x2 => :value);

julia> quarterly = RED.monthly_to_quarterly(monthly);

julia> quarterly[:value][1]
2.0

julia> length(quarterly[:value])
1
```
"""
function monthly_to_quarterly(monthly::DataFrame)

    # quarter months: 1, 4, 7, 10
    quarter_months = collect(1:3:10)

    # Deep copy the data frame
    monthly_copy = deepcopy(monthly)

    # Drop initial rows until it starts on a quarter
    while !in(Dates.month(monthly_copy[:DATE][1]), quarter_months)

        # Verify that something is left to pop
        @assert 1 <= length(monthly_copy[:DATE])

        monthly_copy = monthly_copy[2:end, :]
    end

    # Drop end rows until it finishes before a quarter
    while !in(Dates.month(monthly_copy[:DATE][end]), 2 + quarter_months)
    monthly_copy = monthly_copy[1:end-1, :]
    end

    # Change month of each date to the nearest quarter
    monthly_copy[:DATE] = month_to_quarter.(monthly_copy[:DATE])

    # Split-apply-combine
    quarterly = by(monthly_copy, :DATE, df -> mean(df[:value]))

    # Rename
    rename!(quarterly, :x1 => :value)

    return quarterly

end

结果：

小提琴：https://jsfiddle.net/SchweizerSchoggi/51vrL8px/5/

＆＃13;

＆＃13;

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1"></label>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用不打印任何内容的特殊字符可以让您获得正确的对齐方式，而不会在单选按钮旁边显示任何文字。

‌

我猜它为什么会弄乱样式是因为:: before和:: after代码被添加到文本中。如果没有文本，则无需添加标记。

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
  <thead>
    <th>Select</th>
    <th>Name</th>
  </thead>
  <tr>
    <td>
      <div class="custom-control custom-radio">
        <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
        <label class="custom-control-label" for="customRadio1">&zwnj;</label>
      </div>
    </td>
    <td>Sample option 1</td>
  </tr>
  <tr>
    <td>
      <div class="custom-control custom-radio">
        <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
        <label class="custom-control-label" for="customRadio1">with label</label>
      </div>
    </td>
    <td>Sample option 2</td>
  </tr>
</table>

Answer 2

在空标签上添加mb-3课程

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<table class="table table-bordered">
<thead>
  <th>Select</th>
  <th>Name</th>
</thead>
<tr>
  <td>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label mb-3" for="customRadio1"></label>
</div>
  </td>
  <td>Sample option 1</td>
</tr>
<tr>
  <td>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">with label</label>
</div>
  </td>
  <td>Sample option 2</td>
</tr>
</table>