Question

我知道这一定非常简单，但我只想使用bootstrap 4类在窗口右侧设置一个按钮。它必须与文本位于同一行。

<html>
<head>
</head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <body>
        <div class="row">
            <h3 class="one">Text</h3>
            <button class="btn btn-secondary pull-right">Button</button>
        </div>
    </body>
</html>

代码位于here

Answer 1

Bootstrap 4 uses .float-right而不是Bootstrap 3中的.pull-right。此外，不要忘记使用列正确嵌套行。

<div class="row">
    <div class="col-lg-12">
        <h3 class="one">Text</h3>
        <button class="btn btn-secondary float-right">Button</button>
    </div>
</div>

Answer 2

<div class="container-fluid">
  <div class="row">
    <h3 class="one">Text</h3>
    <button class="btn btn-secondary ml-auto">Button</button>
  </div>
</div>

.ml-auto是Bootstraph 4的非Flexbox对齐方式。

Answer 3

如果您不想使用float，最简单，最干净的方法是使用自动宽度列：

<div class="row">
  <div class="col">
    <h3 class="one">Text</h3>
  </div>
  <div class="col-auto">
    <button class="btn btn-secondary pull-right">Button</button>
  </div>
</div>

Answer 4

您也可以使用以下代码。

for(int j = 0; j < 3; j++) {
    arr[i][j] = new int[1];
    arr[i][j][0] = sc.nextInt();
}

Answer 5

尝试将您的脚本和链接放在头上，如下所示：

<html>
  <head>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"> 
     </script>
  </head>
  <body>
     <div class="row">
        <h3 class="one">Text</h3>
        <button class="btn btn-secondary pull-right">Button</button>
     </div>
  </body>
</html>

Answer 6

您可以使用行和列系统按照您的要求执行某些操作。

在您的文本和按钮内的行中嵌套三列。将两个设置为class =“col-sm-1”，将内部列设置为class =“col-sm-10”

<div class="row">
     <div class="col-sm-1"><h3 class="one">Text</h3></div>
     <div class="col-sm-10"></div>
     <div class="col-sm-1"><button class="btn btn-secondary pull-right">Button</button></div>
</div>

这绝不是实现您想要实现的目标的好方法，但它确实有效（假设屏幕尺寸不会变得太小）。 grid system非常适合构建您的网页。

理想情况下，您可以编写自己的CSS来固定页面右侧的按钮。但是如果你不想这样做，这个方法就可以了。

Answer 7

也许你可以使用 float：right; ：

.one {
  padding-left: 1em;
  text-color: white;
   display:inline; 
}
.two {
  background-color: #00ffff;
}
.pull-right{
  float:right;
}

<html>
<head>
 
  </head>
  <body>
      <div class="row">
       <h3 class="one">Text</h3>
       <button class="btn btn-secondary pull-right">Button</button>
    </div>
  </body>
</html>

Answer 8

你从cdn获得的bootstrap 4.0.0文件没有一个右拉（或左拉）类。 v4是alpha版，所以有很多这样的问题。

有两个选项：

1）反向bootstrap 3.3.7

2）编写自己的CSS。

将按钮对齐到右侧

8 个答案: