0

私はこれが初めてで、ブートストラップのフッター内で 3 つの div を中央に配置しようとしていますが、左側に中央に配置されているようです。私は Twitter Bootstrap フレームワークから離れて、まだロープを学んでいます。ありがとうございました！

HTML

<footer>
    <div class="footer">
    <div class="container narrow row-fluid">

      <div class="span3">
          <h3>Contact Us!</h3>
            <p>Have a question or comment? We can help you!</p>
            <br>by phone: 555-555-5555 
            <br>by mail: info@website.com
            <br>or by our: <a href="contact.htm">Contact Page</a>
      </div>


     <div class="span3">
        <a class="brand" href="index.htm"><img src="images/logo.png" alt="South Shore   Bicycle and Fitness" align="middle"> </a>
     </div>

      <div class="span3">
           <h3>Newsletter</h3>
          <p>Subscribe to our newsletter and get the latest news!</p>
          <form action="php/mail.php" id="subscribe-form" method="post">
          <input type="text" name="email" id="email" placeholder="Your Email Address">
          <button type="submit" class="btn btn-primary">Sign Up</button>
         </form>
      </div>

    </div>
  </div>
  </footer>

CSS

.modal-footer { padding: 14px 15px 15px;
margin-bottom: 0;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
*zoom: 1;
vertical-align: middle;
}

.modal-footer:before, .modal-footer:after {
display: table;
content: "";
vertical-align: middle
}

.modal-footer:after {
clear: both;
vertical-align: middle
}

.modal-footer .btn {
float: right;
margin-left: 5px;
margin-bottom: 0;
vertical-align: middle
}

.span3 {
 width: 166px;
}
4

1 に答える 1

0

margin: 0 auto; を使用できます。要素を中央に配置します。このルールを CSS に追加してみてください。

.span3{
   margin: 0 auto
}

次に、span3 の幅を含む div の 1 つにも与えます。

.container{
   width: 515px /* The actual width may need to be higher or lower than this */
}
于 2013-07-07T22:47:58.143 に答える