Fatal编程技术网
  • html/
  • Html 引导的输入框没有响应，无法更改其宽度

Html 引导的输入框没有响应，无法更改其宽度

html css twitter-bootstrap twitter-bootstrap-3

Html 引导的输入框没有响应，无法更改其宽度,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我是bootstrap的新手，目前正在做一个简单的页面。到目前为止，我已经完成了以下代码，但是我有一些问题。第一个问题是输入框的宽度，我需要它们再宽一点，但无法做到。他们也没有反应。另一个问题是徽标，它总是在横幅的左侧，但当窗口宽度太小时，它会转到窗口的右侧，而不是横幅的左侧 代码 输入字段：屏幕上有一个大警告框，内联字段可能需要自定义宽度。所以你必须自己处理宽度 徽标：由于浮子，徽标始终位于相关容器的正确视线内：右侧；你已经申请了。在桌面模式下，它看起来像在左边，因为它位于浮动列中。在移动模式

我是bootstrap的新手，目前正在做一个简单的页面。到目前为止，我已经完成了以下代码，但是我有一些问题。第一个问题是输入框的宽度，我需要它们再宽一点，但无法做到。他们也没有反应。另一个问题是徽标，它总是在横幅的左侧，但当窗口宽度太小时，它会转到窗口的右侧，而不是横幅的左侧

代码

输入字段：屏幕上有一个大警告框，内联字段可能需要自定义宽度。所以你必须自己处理宽度

徽标：由于浮子，徽标始终位于相关容器的正确视线内：右侧；你已经申请了。在桌面模式下，它看起来像在左边，因为它位于浮动列中。在移动模式下，不再有列浮动。您可以使用媒体查询通过CSS设置徽标浮动，以便处理正确/非浮动行为

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.form-control {
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5;
}
</style>
</head>
<body>


    <div id="header" class="container-fluid">
        <div class="row" style="background-color: green;">
            <div class="col-md-3">
                <div id="logo" style="margin-right: 0px; float: right;">
                    <img
                        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA"
                        width="40px" height="40px" />
                </div>
            </div>
            <div class="col-md-6">
                <div id="banner">
                    <img
                        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC"
                        height="40px;" width="300px;" />
                </div>
                <fieldset>
                    <form class="form-inline" role="form" method="post"
                        action="employee/search.htm" name="employeeForm" id="employeeForm">
                        <div class="form">
                            <div class="col-lg-3">
                                <input class="form-control input-sm" type="text"
                                    name="firstName" id="fistName" placeholder="First Name">
                            </div>
                            <div class="col-lg-2">
                                <input class="form-control input-sm" type="text" name="lastName"
                                    id="lastName" placeholder="Last Name">
                            </div>
                            <button type="submit" class="btn btn-success">Search</button>
                            <a href="#" class="btn btn-info btn-sm">Click1</a> <a href="#"
                                class="btn btn-info btn-sm">Click2</a>
                    </form>
                </fieldset>
            </div>
            <div class="col-md-3">
                <div id="images" style="float: left;">
                    <img
                        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA"
                        width="20px" height="20px" /> <img
                        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA"
                        width="20px" height="20px" /> <img
                        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA"
                        width="20px" height="20px" /> <img
                        src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA"
                        width="20px" height="20px" />
                </div>
            </div>
        </div>
        <div id="content" class="container">...</div>
</body>
</html>