Bootstrap 按钮在不应该的时候换行

Question

我不明白为什么“搜索”和“清除”按钮会换行到邮政编码后的下一行。

我使用了此处 Button Addons 代码中的最后一个示例。

https://getbootstrap.com/docs/4.0/components/input-group/.

虽然我没有包括 aria-label="收件人的用户名" aria-describedby="basic-addon2" 因为 R htmltools 似乎不喜欢它，我不不认为是这样（因为我尝试在控制台中添加它但没有效果）。

尽管 Bootstrap 示例没有明确地将 -fluid 添加到 container 和 flex -xl-nowrap 到 row，我可以看到他们的代码在控制台中有它，所以尝试添加它。

我已经为列添加了背景颜色，以明确它们的位置。

---
title: "Stack Overflow Bootstrap "
output: html_document
---

## Purpose
Show buttons wrapping when I don't want them to
```{r cars, echo=FALSE}

# Load packages
pacman::p_load(tidyverse, htmltools)

  tagList(
    htmltools::withTags(
      div(class="container-fluid",
        h2("Heading 2"),
        div(class="row flex-xl-nowrap",
          div(class="col-sm-6", 
              style="background-color:powderblue;",
            h3("1st Column Heading 3")),
          div(class="col-sm-6", 
              style="background-color:Cornsilk;",
            h3("2nd Column Heading 3"),
            div(class="input-group", 
              input(
                type = "text",
                class="form-control",
                placeholder = "Postcode...",
                style = "width: 80px;"
              ),
              div(class="input-group-append",
                button(
                  type = "submit",
                  class="btn btn-success",
                  "Search"
                ),
                button(
                  type = "reset",
                  class="btn btn-primary",
                  "Clear"
                )
              )
            )
          )
        )
      )
    )
  )
```

Answer 1

正如@RadovanMiletić 指出的那样，答案是添加“显示：块”，即更改

div(class="input-group",

至

div(class="input-group", style = "display: block",

Bootstrap 按钮在不应该的时候换行

Boostrap Buttons Wrapping when they shouldn't be

r

r-markdown

bootstrap-4

htmltools