Question

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

代码

<!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>

Answer 1

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

徽标：由于您已应用float: right;，徽标始终位于相关容器的正确位置。在桌面模式下，它看起来像在左侧，因为它位于浮动列中。在移动模式下，没有列浮动了。您可以使用媒体查询通过CSS设置徽标浮动，以便您可以处理正确/非浮动行为。

Bootstrap的输入框没有响应，无法改变其宽度

1 个答案: