问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在 bootstrap 4 中将按钮右对齐

社区维基
1
新手上路，请多包涵

我试着在这里查找，但找不到与此特定问题相关的任何内容。

我正在尝试制作一个标题，该标题在屏幕的左侧和右侧都有一个按钮，中间有一个徽标，但是每当我使窗口变小或变大时，右侧的按钮就不会保持对齐。

小窗

大窗户

这是代码：

 <header>
        <div id="container-fluid">
            <div class="row">
                <div class=" col-2">
                    Menu
                </div>
                <div class="col-8 text-center ">
                    Logo
                </div>
                <div class="col-2 float-right">
                    Contact
                </div>
            </div>
        </div>
     </header>

我在这里错过了什么？

提前致谢。

修复它，代码现在看起来像这样：

     <body>
    <header>
        <div id="container-fluid">
            <div class="row">
                <div class="col">
                    <span class="float-left">Menu</span>
                </div>
                <div class="col text-center">
                    Logo
                </div>
                <div class="col">
                    <span class="float-right">Contact</span>
                </div>
            </div>
        </div>
     </header>
</body>

原文由 Nathan Ruth 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssbootstrap
阅读 737
2 个回答
得票最新
社区维基
1
✓ 已被采纳

包装您的内容，以便它可以根据父容器对齐。

 <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://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<header>
  <div id="container-fluid">
    <div class="row">
      <div class="col-2">
        <span class="float-left">Menu</span>
      </div>
      <div class="col-8 text-center">
        Logo
      </div>
      <div class="col-2">
        <span class="float-right">Contact</span>
      </div>
    </div>
  </div>
</header>

原文由 Dalin Huang 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

对于这种方法，您可以使用 flex-bootstrap-class 和 justify-content ：

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row d-flex justify-content-between bg-light">
    <div class="p-2 bg-dark text-light">
      Menu
    </div>
    <div class="p-2 bg-dark text-light">
      Logo
    </div>
    <div class="p-2 bg-dark text-light">
      Contact
    </div>
  </div>
</div>

原文由 Black Sheep 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题