【问题标题】:HTML/CSS/ Bootstrap - How to right aligne formHTML/CSS/ Bootstrap - 如何右对齐表单
【发布时间】:2022-01-10 22:42:32
【问题描述】:

我对前端技术完全陌生。我尝试为我的后端应用程序编写一些代码。现在我正在使用 Html、Css 和 Bootstrap。我尝试将搜索表单放在网页的右侧。我做错了什么。

页面浏览量:

html:

<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" 
rel="stylesheet">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" style="color: white;">Students Manager</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- 
target="#navbarColor02" aria-controls="navbarSupportedContent" aria-expanded="false" 
aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse-navbar-collapse" id="navbarColor02">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" data-toggle="modal" data-target="#exampleModal">Add 
student <span class="sr-only">(current)</span></a>
        </li>
    </ul> 
    <div class="pull-right">
    <form class="form-inline my-2 my-lg-0">
        <input class="search" name="key" id="searchName" class="form-control mr-sm-2" 
placeholder="Search student....">  
    </form>
</div>
</div>
</nav>


//resto of code

css 文件:

body{
 margin-top:20px;
 background: #f5f5f5;
}
.card {
  border: none;
 -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  margin-bottom: 30px;
}
.w-60 {
  width: 60px;
}


h1, h2, h3, h4, h5, h6 {
 margin: 0 0 10px;
 font-weight: 600;
}
.social-links li a {
  -webkit-border-radius: 50%;
  background-color: rgba(89,206,181,.85);
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  width: 30px;
  font-size: 12px;
}
a {
  color: #707070;
}

感谢您的任何建议和理解

【问题讨论】:

    标签: html css bootstrap-4


    【解决方案1】:

    尝试使用Bootstrap自带的网格系统,你可以以最好的方式定位任何元素。

    文档:https://getbootstrap.com/docs/4.0/layout/grid/

    【讨论】:

      【解决方案2】:

      尝试在 css 中添加它

      .pull-right {
          float: right;
      }

      【讨论】:

      • 不幸的是它不起作用
      猜你喜欢
      • 2013-06-17
      • 2021-05-13
      • 1970-01-01
      • 2011-10-26
      • 2017-07-15
      • 2011-07-10
      • 1970-01-01
      • 2017-09-24
      • 2023-04-01
      相关资源
      最近更新 更多