0
Ich lerne derzeit Bootstrap durch den Aufbau eines einfachen Portfolios. Aber ich habe keine Ahnung, wie man den Submit-Button vollständig anzeigt, es sei denn, ich zoome meinen Browser zu 90% aus, und der Submit-Button wird vollständig angezeigt. Gibt es eine Möglichkeit, ein besseres Ergebnis bei diesen Problemen zu erzielen?Html Button Submit nicht vollständig angezeigt
Beispiel html:
<style>
\t \t section {
\t \t \t width: 100vw;
\t \t \t height: 100vh;
\t \t \t padding: 50px;
\t \t }
\t \t .cl_white {
\t \t \t color: white;
\t \t }
\t \t img {
\t \t \t width: 300px;
\t \t \t transition: opacity 1s ease-in-out;
\t \t }
\t \t img:hover{
\t \t \t opacity: .5;
\t \t }
\t \t .col-text{
\t \t \t -webkit-column-count: 3;
\t \t }
\t \t div.panel-body img {
\t \t \t transition: opacity .5s ease-in-out;
\t \t }
\t \t div.panel-body img:hover {
\t \t \t opacity: .5;
\t \t }
\t </style><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
\t <title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
\t
</head>
<body data-spy="scroll" data-target=".navbar">
\t <nav class="navbar navbar-inverse navbar-fixed-bottom">
\t \t <ul class="nav navbar-nav">
\t \t \t <li><a href="#home">Home</a></li>
\t \t \t <li><a href="#work">My Work</a></li>
\t \t \t <li><a href="#about">About</a></li>
\t \t \t <li><a href="#contact">Contact</a></li>
\t \t </ul>
\t </nav>
\t <section id="home" style="background: url(images/header.jpg); background-size: 100% 100%;" class="cl_white text-center">
\t \t <h1>My Portfolio</h1>
\t \t <p class="lead"> Let Just read.</p>
\t \t <button class="btn btn-success">Contact Me</button>
\t </section>
\t <section id="work" class="container">
\t \t <div class="row">
\t \t \t <div class="page-header">
\t \t \t \t <h1 class="text-center">My Work</h1>
\t \t \t </div>
\t \t </div>
\t \t <div class="row">
\t \t \t <div class="col-md-12 text-center">
\t \t \t \t <img src="images/__portfolio-1.jpg" class="img-thumbnail">
\t \t \t \t <img src="images/__portfolio-1.jpg" class="img-thumbnail">
\t \t \t \t <img src="images/__portfolio-1.jpg" class="img-thumbnail">
\t \t \t </div>
\t \t </div>
\t \t <div class="row">
\t \t \t <div class="col-md-12 text-center">
\t \t \t \t <img src="images/__portfolio-1.jpg" class="img-thumbnail">
\t \t \t \t <img src="images/__portfolio-1.jpg" class="img-thumbnail">
\t \t \t \t <img src="images/__portfolio-1.jpg" class="img-thumbnail">
\t \t \t </div>
\t \t </div>
\t </section>
\t <section id="about" class="container">
\t \t <h2 class="text-center">About</h2>
\t \t <div class="col-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div><br>
\t \t <div class="row">
\t \t \t <div class="col-md-6">
\t \t \t \t <div class="panel panel-primary">
\t \t \t \t \t <div class="panel-heading">
\t \t \t \t \t \t <h4>Web Designing</h4>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="panel-body">
\t \t \t \t \t \t <img src="images/_www.jpg" class="img-circle center-block">
\t \t \t \t \t \t <p class="lead text-center">I Do Web Designing.</p>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="panel-footer"></div>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="col-md-6">
\t \t \t \t <div class="panel panel-primary">
\t \t \t \t \t <div class="panel-heading">
\t \t \t \t \t \t <h4>Web Designing</h4>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="panel-body">
\t \t \t \t \t \t <img src="images/_www.jpg" class="img-circle center-block">
\t \t \t \t \t \t <p class="lead text-center">I Do Web Designing.</p>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="panel-footer"></div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </section>
\t
\t <section id="contact" style="background: silver;">
\t \t <div class="page-header">
\t \t \t <h2 class="text-center">Contact Me!</h>
\t \t </div>
\t \t <form class="col-md-5 col-md-offset-4">
\t \t \t <div class="form-group">
\t \t \t \t <input class="form-control" placeholder="Insert your Name" type="text">
\t \t \t </div>
\t \t \t <div class="form-group">
\t \t \t \t <input class="form-control" placeholder="Insert your Email" type="email">
\t \t \t </div>
\t \t \t <div class="form-group">
\t \t \t \t <input class="form-control" placeholder="Subject" type="text">
\t \t \t </div>
\t \t \t <div class="form-group">
\t \t \t \t <textarea class="form-control" rows="10">Comments</textarea>
\t \t \t </div>
\t \t \t <div class="form-group">
\t \t \t \t <input class="btn btn-success btn-block" type="submit">
\t \t \t </div>
\t \t </form>
\t </section>
</body>
</html>
Erstellen Sie [MVCE] (https://stackoverflow.com/help/mcve), anstatt Ihre gesamte Website in die Frage einzufügen. Auf diese Weise werden Sie viel bessere Antworten erhalten, weil die Leute Zeit haben werden, ein kurzes Snippet zu lesen, das das Problem isoliert, anstatt unnötiges Durcheinander zu durchlaufen, was für Ihre Frage irrelevant ist. –