时间戳

首页 > 解决方案 > 在引导程序中定位输入按钮和文本

html - 在引导程序中定位输入按钮和文本

问题描述

我会在 html 中定位表单输入（按钮、文本等）。

在此处输入图像描述

我想左对齐按钮并下拉导航栏中的文本。但我不知道该怎么做。我使用引导程序 3。

代码： 

html,body{

    	background-color: #F8F8F8;

    }

    .navbar{

    	background-color: white;
    	border: none;
    	height: 100px;
    	margin-top: 15px;
    	margin-left: 100px;
    	margin-right: 100px;

    }
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

	<title>Moda Rüzgarı</title>
</head>
<body>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    <div class="navbar navbar-dark bg-white mr-auto" role="navigation">
    	
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu"><span class="sr-only"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

    <a class="navbar-brand" href="index.php"><img src="modaruzgari.png" height="75"></a>

    <div class="navbar-collapse collapse" id="menu">
    	
    	<div class="input-group col-xs-5 col-lg-4">

    		<input type="text" class="form-control">
    		<span class="input-group-btn"><button class="btn btn-default" type="button">Ara</button></span>
    	
    	</div>

    	<span class="input-group-btn">
    		
    	<button class="btn btn-default" type="button" style="width: 50px;height: 50px;font-size: 13px;text-align: center;background: white;border: none;"><img src="girisyap.png" height="25">Giriş Yap</button>

    	<button class="btn btn-default" type="button" style="width: 50px;height: 50px;font-size: 13px;text-align: center;background: white;border: none;"><img src="sepetim.png" height="25">Sepetim</button>

    	</span>

    </div>

    </div>

如果您打开片段，请打开整页。

我需要你的帮助。

感谢您的回答。

标签： htmltwitter-bootstrap

解决方案

推荐阅读