发表新帖
发表新帖

How do I right align an element using twitter bootstrap?

前端 未结
关注
3 1030
盖世英雄少女心
盖世英雄少女心 2021-02-05 01:16

I have 3 elements and I am trying to align the button to the right side of the screen, but am having trouble doing so.


  


        

                      

              相关标签:
       

      

      
      

        

          3条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  悲&欢浪女        
                
              
    
                            
    
                2021-02-05 02:08
              
    
            
    
            
    
                                                                       

    Try the class 'pull-right'.
    


    <div class="pull-right">...</div>

    


    See http://getbootstrap.com/css/#helper-classes-floats
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  野的像风        
                
              
    
                            
    
                2021-02-05 02:10
              
    
            
    
            
    
                                                                       

    try something like this
    


    <a href = "link_to_img.html" class = 'btn btn-success pull-right'>Grab it!</a>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  梦毁少年i        
                
              
    
                            
    
                2021-02-05 02:17
              
    
            
    
            
    
                                                                       

    Utilise justify-content-end
    


    From the bootstrap documentation, it says:
    


    Bootstrap 3 used .navbar-left and .navbar-right for navbar alignment.
    


    Bootstrap 4 uses the various helper classes.
    


    (Alignment part)
https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_navbars.cfm
    


    and here more info about the new alignment
https://www.quackit.com/css/flexbox/tutorial/flexbox_alignment.cfm
    


    <!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>

<body>

  <style>
    .wrapper {
      display: flex;
      align-items: center;
      background-color: beige;
      height: 100vh;
    }

    .wrapper > div {
      padding: 20px;
      font-size: 4vw;
      color: white;
    }

    .red {
      background: orangered;
    }

    .green {
      background: yellowgreen;
    }

    .blue {
      background: steelblue;
    }

    body {
      margin: 0;
    }
  </style>
  <div class="wrapper justify-content-end">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
  </div>
</body>

</html>

    


    https://plnkr.co/edit/LtfW2fj9f3E9Ehj1M8jN?p=catalogue
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
                             

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复
热议问题