HTML Bootstrap表單，以及不與中心對齊

我正在爲一個站點的簡單登錄頁面和我的表單不會對齊到中心。如果你看看here，你可以看到它稍微向右偏移。我已經嘗試在表單中添加一個容器div，並將其設置爲帶有margin：0 auto的塊，但沒有任何更改。我也嘗試設置class =「span6 offset 3」以將其對齊到中心，但是仍然存在一點偏移。我有一種感覺，其他div的所有div都在建立某種邊緣，但我似乎無法弄清楚如何解決這個問題。這裏是我的HTML代碼：HTML Bootstrap表單，以及不與中心對齊

<div class="row"> 
     <div class="span3"></div><!--/.span3--> 
     <div class="span6"> 
      <div class="well span6" align="center"> 
       <form id="contact-form" name="contact-form" method="post" action="form-processing.php"> 
        <input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required> 
        <input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required> 
        <input class="span6" name="Message" id="Message" type="text" rows="3" placeholder="What's on your mind?" required><br> 
        <button type="submit" class="btn btn-primary" id="button">Submit</button> 
        <button type="reset" class="btn">Clear</button> 
       </form> 
      </div><!--/.well span6--> 
     </div><!--/.span6--> 
     <div class="span3"></div><!--/.span3--> 
    </div><!--/.row-->

這是我的非引導CSS代碼：

h1 {font-family: marvel, serif; color:#060; font-size:90px; -webkit-text-stroke: 1px white;} 
h2 {font-family: marvel, serif; color:#CCC; font-size:50px; -webkit-text-stroke: 1px black;} 
p {color:white; font-size:20px;} 
body{ 
    padding: 40px; 
    margin:0 auto; 
    background-image: url(../img/background.jpg); 
    background-repeat: repeat; 
    background-position: center center; 
} 
.welcome {padding:30px 0 0 0;} 
#Message {overflow:hidden;} 
.well {margin:0 auto;} 
.navbar-fixed-top,.navbar-fixed-bottom{position:fixed}

如果你能找出是什麼問題，我會烤你一個餡餅什麼的。謝謝。

來源

2013-01-23 Brian

它看起來像你的「好」類的填充將寬度添加到引導程序的span6類。

您可以通過添加「box-sizing：border-box;」來獲取箱子大小的路線或者通過鎖定特定的div，並將寬度從570px（bootstrap的span6寬度）減少到532px（左側和右側的19px填充）。

希望有所幫助。

來源

2013-01-23 02:21:06 DavidVII

這是我輸入的新代碼，與前面的代碼幾乎完全相同，省略了span6類。現在一切都完美了。

<div class="row"> 
    <div class="span3"></div><!--/.span3--> 
    <div class="well span6" align="center"> 
     <form id="contact-form" name="contact-form" method="post" action="form-processing.php"> 
      <input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required> 
      <input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required> 
      <textarea class="span6" name="Message" id="Message" type="text" rows="3" placeholder="What's on your mind?" required></textarea><br> 
      <button type="submit" class="btn btn-primary" id="button">Submit</button> 
      <button type="reset" class="btn">Clear</button> 
     </form> 
    </div><!--/.well span6--> 
    <div class="span3"></div><!--/.span3--> 
</div><!--/.row-->

來源

2013-01-23 02:53:45 Brian

聽起來像你欠自己一個餡餅...... –

我建議不要編輯引導程序的CSS，但包括你自己的CSS，如上所述。創建一個你想要中心的特定ID，然後填充它直到它工作。看起來像自舉CSS干擾你自己的CSS導致的問題。它現在可以工作，所以如果你認爲重要的是，當你想在未來做出改變時，請記住只有你自己的CSS。最後一件事情是，打開引導頁面，讓您知道在將它們包含在頁面中之前，跨度和行的樣子。

來源

2013-01-23 03:24:48

請記住，爲了引導這些'-offset-'類，這對於對齊項目非常有幫助。例如，您可以使用「col-md-12 col-md-offset-2」或span6「col-lg-6 col-lg-offset-3」。

來源

2015-11-30 18:25:27 lorenag83

HTML Bootstrap表單，以及不與中心對齊

回答

相關問題