Question

这是我当前的导航：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">ApplicationName</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav" id="main-navigation">
                <li><a href="#">Item1</a></li>
                <li><a href="#">Item2</a></li>
            </ul>
        </div>
    </div>
</nav>

通过此导航，我有这个： enter image description here

我真正想要的是： enter image description here

我已尝试浮动锚标记，但它只是浮动在li标记内。在ExtJS中，我有' - ＆gt;'项目，它提供了我这种行为。我怎么能这样做？

我正在使用Bootstrap 3.1.1。

谢谢。：）

Answer 1

将pull-right类添加到ul标记

完整示例：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">ApplicationName</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav" id="main-navigation">
                <li><a href="#">Item1</a></li>
            </ul>
            <ul class="nav navbar-nav pull-right" id="main-navigation">
                <li><a href="#" class="pull-right">Item2</a></li>
            </ul>
        </div>
    </div>
</nav>

结果： works!

Answer 2

你必须给出这个元素：

CSS

li.right {
    position: absolute;
    right: 0;
}

HTML

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">ApplicationName</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav" id="main-navigation">
            <li><a href="#">Item1</a></li>
            <li class="right"><a href="#">Item2</a></li>
        </ul>
    </div>
</div>

Working Example

Answer 3

从新的引导程序开始，我们不使用pull-right

从v3.1.0开始，我们在下拉菜单中弃用了.pull-right。要右对齐菜单，请使用public class CameraPreviewNew extends ViewGroup implements Callback { public static final int CAMERA_BACK = 0; public static final int CAMERA_FRONT = 1; public Camera mCamera = null; private Context context = null; SurfaceView mSurfaceView; SurfaceHolder mSurfaceHolder; Size mPreviewSize; List<Size> mSupportedPreviewSizes; PreviewCallback mPreviewCallback; AutoFocusCallback mAutoFocusCallback; public CameraPreviewNew(Context context, PreviewCallback previewCallback, AutoFocusCallback autoFocusCb) { super(context); mPreviewCallback = previewCallback; mAutoFocusCallback = autoFocusCb; this.context = context; mSurfaceView = new SurfaceView(context); addView(mSurfaceView); mSurfaceHolder = mSurfaceView.getHolder(); mSurfaceHolder.addCallback(this); if (Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) { mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS); } } public void setCamera(Camera camera) { mCamera = camera; if (mCamera != null) { mSupportedPreviewSizes = mCamera.getParameters() .getSupportedPreviewSizes(); requestLayout(); } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { final int width = resolveSize(getSuggestedMinimumWidth(), widthMeasureSpec); final int height = resolveSize(getSuggestedMinimumHeight(), heightMeasureSpec); setMeasuredDimension(width, height); } public void hideSurfaceView() { mSurfaceView.setVisibility(View.INVISIBLE); } public void showSurfaceView() { mSurfaceView.setVisibility(View.VISIBLE); } public void surfaceCreated(SurfaceHolder holder) { try { if (mCamera != null) { mCamera.setPreviewDisplay(holder); } } catch (IOException exception) { Log.e("logtag", "IOException caused by setPreviewDisplay()", exception); } } public void surfaceDestroyed(SurfaceHolder holder) { if (mCamera != null) { mCamera.cancelAutoFocus(); mCamera.stopPreview(); } } public void surfaceChanged(SurfaceHolder holder, int format, int w, int h) { if (holder.getSurface() == null) { return; } if (mCamera != null) { Camera.Parameters parameters = mCamera.getParameters(); mPreviewSize = getBestPreviewSize(mCamera.getParameters(), w, h); parameters.setPreviewSize(mPreviewSize.width, mPreviewSize.height); requestLayout(); mCamera.setParameters(parameters); mCamera.setPreviewCallback(mPreviewCallback); mCamera.startPreview(); mCamera.autoFocus(mAutoFocusCallback); setCameraDisplayOrientation(0); } } private void setCameraDisplayOrientation(int cameraId) { Camera.CameraInfo info = new Camera.CameraInfo(); Camera.getCameraInfo(cameraId, info); int rotation = ((WindowManager) context .getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay() .getRotation(); int degrees = 0; switch (rotation) { case Surface.ROTATION_0: degrees = 0; break; case Surface.ROTATION_90: degrees = 90; break; case Surface.ROTATION_180: degrees = 180; break; case Surface.ROTATION_270: degrees = 270; break; } int result; if (info.facing == Camera.CameraInfo.CAMERA_FACING_FRONT) { result = (info.orientation + degrees) % 360; result = (360 - result) % 360; // compensate the mirror } else { // back-facing result = (info.orientation - degrees + 360) % 360; } mCamera.setDisplayOrientation(result); } protected static Comparator<Size> newSizeComparator() { return new Comparator<Size>() { @Override public int compare(Size lhs, Size rhs) { return Integer.valueOf(rhs.height * rhs.width).compareTo( lhs.height * lhs.width); } }; } private Size getBestPreviewSize(Parameters parameters, int screenWidth, int screenHeight) { List<Size> supportedSizes = parameters.getSupportedPreviewSizes(); Collections.sort(supportedSizes, newSizeComparator()); int previewHeight = screenHeight; int previewWidth = screenWidth; if (previewHeight > previewWidth) { int swap = previewWidth; previewWidth = previewHeight; previewHeight = swap; } Size bestSize = null; float bestRatio = 999; for (Size s : supportedSizes) { if (s.height > s.width) { int swap = s.width; s.width = s.height; s.height = swap; } float cameraRatio = ((float) s.height / (float) s.width); float screenRatio = ((float) previewHeight) / ((float) previewWidth); if ((s.height >= previewHeight) && (s.width >= previewWidth)) { float ratioDiff = cameraRatio - screenRatio; if ((ratioDiff < 0.19) && (ratioDiff > -0.19) && (Math.abs(bestRatio) > Math.abs(ratioDiff))) { bestSize = s; bestRatio = ratioDiff; } } } return bestSize; } public void setCameraFlashLight(Boolean setFlash) { Parameters _parameters = mCamera.getParameters(); if (setFlash) { _parameters.setFlashMode(Parameters.FLASH_MODE_TORCH); } else { _parameters.setFlashMode(Parameters.FLASH_MODE_OFF); } mCamera.setParameters(_parameters); mCamera.startPreview(); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { if (changed && getChildCount() > 0) { final View child = getChildAt(0); final int width = r - l; final int height = b - t; int previewWidth = width; int previewHeight = height; if (mPreviewSize != null) { previewWidth = mPreviewSize.width; previewHeight = mPreviewSize.height; } if (width * previewHeight > height * previewWidth) { final int scaledChildWidth = previewWidth * height / previewHeight; child.layout((width - scaledChildWidth) / 2, 0, (width + scaledChildWidth) / 2, height); } else { final int scaledChildHeight = previewHeight * width / previewWidth; child.layout(0, (height - scaledChildHeight) / 2, width, (height + scaledChildHeight) / 2); } } } }。导航栏中的右对齐导航组件使用此类的mixin版本自动对齐菜单。要覆盖它，请使用.dropdown-menu-right

.dropdown-menu-left.

如果你使用haml

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
 ...
</ul>

Answer 4

如果您将类TIEHASH添加到左侧的项目中，则应将其后的所有内容推送到右侧。

Bootstrap 3 - 项目在导航中浮动

4 个答案: