【问题标题】:Columns underneath each other Bootstrap彼此下方的列 Bootstrap
【发布时间】:2014-12-01 16:57:04
【问题描述】:

在我的网站上以正确的顺序排列列时,我遇到了真正的麻烦。我希望红色框(在登录框下方)成为另一个新闻面板。但我无法弄清楚如何做到这一点。 https://www.dropbox.com/s/vgwhpurwo15gvet/Capture.PNG?dl=0

 <div class="container"> 

  <div class="col-lg-6">   
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Sign In</h3>
                            <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="forgotpassword.php">Forgot password?</a></div>
  </div>
  <div class="panel-body">
                            <form action="index.php" method="post">
                              <div class="form-group">
    <label for="username">Username</label>
    <input type="text" name="username" class="form-control" placeholder="Username" id="username" value="<?php  echo $submitted_username; ?>" />
  </div>
                              <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password" name="password" value="">
  </div>
  <input type="submit" class="btn btn-success" value="Login" />
  <span>
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#missionmodal">
Read Me!</button>
<!-- Modal -->
<div class="modal fade" id="missionmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Our Mission</h4>
      </div>
      <div class="modal-body">
        People Tank is far from finished but we have a clear perception of what we want People Tank to be. We want it to be clear and easy to use for everyone, revolutionize the way we socialize with friends and family but most importanlty we want it to be free but we can only achieve this with your early support for our idea. That's why we ask if you can afford to give us a small donation to help us cover our costs. Any amount is greatly appreciated.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary disabled">Donate With PayPal</button>
      </div>
    </div>
  </div>
</div></form>

              </div>  

</div>
       </div>

<div class="col-lg-6">   
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Register</h3>

  </div>
  <div class="panel-body">


                                     <form action="register.php" method="post"> 
                                        <div class="form-group">
    <label for="firstname">First Name</label>
    <input type="text" class="form-control" id="firstname" placeholder="First Name" name="firstname" value="" >
  </div>

                                                                                           <div class="form-group">
    <label for="secondname">Second Name</label>
    <input type="text" class="form-control" id="secondname" placeholder="Second Name" name="secondname" value="" >
  </div>


                                     <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" placeholder="Username" name="username" value="" >
  </div>

                                                                          <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" placeholder="Email" name="email" value="" >
  </div>

                                                                                                                <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password" name="password" value="" >
  </div>

                                   <div class="form-group">    
                                    <label for="gendeer">Select Gender</label>
                                   <select name="gender" id="gender" class="form-control">
  <option>Male</option>
  <option>Female</option>
</select>
      </div>


                                       <p>DOB:<br />
                                       <?php
      $con = mysql_connect('localhost','root',"");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("peopletank", $con);
$name= mysql_query("select * from month");

echo '<select name="month" id="user" class="textfield1">';
 while($res= mysql_fetch_assoc($name))
{
echo '<option>';
echo $res['month'];
echo'</option>';
}
echo'</select>';

mysql_close($con)


?>
&nbsp;<?php
      $con = mysql_connect('localhost','root',"");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("", $con);
$name= mysql_query("select * from day order by day_id asc");

echo '<select name="day" id="user" class="textfield1">';
 while($res= mysql_fetch_assoc($name))
{
echo '<option>';
echo $res['day'];
echo'</option>';
}
echo'</select>';

mysql_close($con)


?>
    <?php
      $con = mysql_connect('localhost','root',"");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("", $con);
$name= mysql_query("select * from year");

echo '<select name="year" id="user" class="textfield1">';
 while($res= mysql_fetch_assoc($name))
{
echo '<option>';
echo $res['year'];
echo'</option>';
}
echo'</select>';

mysql_close($con)


?>
                                         <br /><br />
                                         <input type="submit" class="btn btn-success" value="Register" />
                                         <a class="btn btn-primary disabled" href="#">Register with Facebook</a>
                                         <a class="btn btn-info disabled" href="#">Register with Twitter</a>
                                       </p> 

                              </form>
  </div>  
        </div>
</div>
</div>
</div>

【问题讨论】:

  • 您能否偶然发布您当前的代码?这比屏幕截图有用得多。
  • 添加了一点混乱
  • 没关系,现在给你做个bootply。
  • 这可能需要一段时间,哈哈

标签: php html twitter-bootstrap web


【解决方案1】:

好的,这个 Bootply 应该会给你大致的想法。

Bootply

这是代码:

<div class="container">
  <div class="col-lg-6">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Sign In <span class="pull-right"><a href="forgotpassword.php">Forgot password?</a></span></h3>
            </div>
            <div class="panel-body">
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">News</h3>
            </div>
            <div class="panel-body">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Register</h3>
            </div>
            <div class="panel-body">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

基本上,它是col 结构中的col 结构,因此每列可以有多个“行”;或在您的案例面板中。只需使用您的输入填写panel-body,它应该适合您。

干杯!

【讨论】:

  • 非常感谢您的帮助 :)
  • 没问题,很高兴我能帮上忙!
猜你喜欢
  • 2021-08-04
  • 2018-12-06
  • 2018-01-06
  • 2018-08-03
  • 1970-01-01
  • 2017-01-15
  • 1970-01-01
  • 1970-01-01
  • 2019-07-02
相关资源
最近更新 更多