2013-11-03 14 views
36

में div को सही संरेखित करें क्या div div को सही संरेखित करने के लिए बूटस्ट्रैप 3 में कोई तरीका है?बूटस्ट्रैप 3

मुझे ऑफसेटिंग संभावनाओं से अवगत है, लेकिन मैं अपने कंटेनर के दाईं ओर एक स्वरूपित div को संरेखित करना चाहता हूं, जबकि इसे पूर्ण मोबाइल दृश्य में केंद्रित होना चाहिए। वर्ग 'पुल-राइट' अब काम नहीं कर रहा है। क्या वे इसे बदलना भूल गए थे या क्या मुझे कुछ याद आ रही है?

<div class="row"> 
    <div class="container"> 
    <div class="col-md-4"> 
     left content 
    </div> 
    <div class="col-md-4 col-md-offset-4"> 
     <!-- The next div has a background color and its own paddings and should be aligned right--> 
     <!-- It is now in the right column but aligned left in that column --> 
     <div class="yellow_background">right content</div> 
    </div> 
    </div> 
</div> 

शुरे मैं कैसे सीएसएस में यह करने के लिए है, लेकिन यह शुद्ध बूटस्ट्रैप 3 में किया जा सकता?

एचटीएमएल

<div class="row"> 
    <div class="container"> 

    <div class="col-md-4"> 
     left content 
    </div> 

    <div class="col-md-4 col-md-offset-4"> 

     <div class="yellow-background"> 
     text 
     <div class="pull-right">right content</div> 
     </div> 

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

सीएसएस

.yellow-background { 
    background: blue; 
} 

.pull-right { 
    background: yellow; 
} 

एक पूर्ण उदाहरण Codepen पर पाया जा सकता:

+1

पुल यहीं काम कर रहे ... – Gavin

उत्तर

36

आप कुछ इस तरह का मतलब है।

48

वर्ग पुल सही अभी भी बूटस्ट्रैप 3 में देखें 'helper classes' here

पुल सही शैली और सामग्री के बारे में अधिक जानकारी के बिना द्वारा

.pull-right { 
    float: right !important; 
} 

परिभाषित किया गया है है, यह कहना मुश्किल है।

यह निश्चित रूप से इस JSBIN में सही खींचती है जब पेज 990px ​​से अधिक व्यापक है - जो है, जब में कॉल-md स्टाइल किक, बूटस्ट्रैप 3 किया जा रहा है मोबाइल पहली और सब।
FYI करें: .pull-right केवल सही करने के लिए div धक्का

1

मैं तुम्हें div के भीतर सही करने के लिए सामग्री, पहले से ही भरपाई सही करने के लिए अपने आप को धक्का के साथ div संरेखित करने के लिए, यहाँ कुछ कोड और LIVE sample कोशिश लगता है , लेकिन div के अंदर सामग्री नहीं है।

HTML:

<div class="row"> 
    <div class="container"> 
    <div class="col-md-4 someclass"> 
     left content 
    </div> 
    <div class="col-md-4 col-md-offset-4 someclass"> 
     <div class="yellow_background totheright">right content</div> 
    </div> 
    </div> 
</div> 

सीएसएस:

.someclass{ /*this class for testing purpose only*/ 
    border:1px solid blue; 
    line-height:2em; 
} 

.totheright{ /*this will align the text to the right*/ 
    text-align:right; 
} 

.yellow_background{ 
    background-color:yellow; 
} 

एक और संशोधन:

... 
<div class="yellow_background totheright"> 
    <span>right content</span> 
    <br/>image also align-right<br/> 
    <img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/> 
</div> 
... 

आशा है कि यह आपकी समस्या को साफ हो जाएगा

-2

अपने सीएल को offset8 जोड़े गधा, उदाहरण के लिए:

<div class="offset8">aligns to the right</div> 
+0

कृपया अपने उत्तर को संपादित करें और अधिक विवरण देकर इसकी गुणवत्ता में सुधार होगा। –

संबंधित मुद्दे